两张浮动图像之间的DIV尺寸不正确

我需要使用由设计人员创建的自定义图像创建一个对话框。为了讨论的目的，这是我的应用程序的正确答案。对话框必须能够承受宽度和高度的变化。这对桌子很容易做到，但我想维护一个无桌子的设计，所以我想我可以使用3排DIV来做到这一点。例如，将图像浮动到左侧，将图像浮动到右侧，然后在其间放置DIV，然后将图像设置为背景，以便可以在其上输入文本。两张浮动图像之间的DIV尺寸不正确

这里是我的失败尝试这样做的演示：（只显示一行） http://www.seaburydesign.com/rounded/demo.html

正如你所看到的，这几乎工作。但是，中间的DIV只是它内部的大小，尽管我已经设置了高度和宽度。我需要保持宽度灵活。

有关如何解决此问题的任何想法？

来源

2012-02-24 Todd Davis

除非你打算让这个URI在未来十年左右工作，否则你可以尝试隔离代码并使用一个pastebin来发布它，以便将来的读者可以按照这个问题并给出答案。 – kontur 2012-02-24 21:35:59

如果您将图像的圆角设为白色而不是透明，则可以将背景图像应用于标题标记而不是中间的div。这会产生这样的印象，即中间div与这两个图像具有相同的高度。

更新

如果可能的话（这取决于您的浏览器需要支持），你可以做圆角与CSS3的边界半径属性，而不是使用的图像。这将是这样的：

header { 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
}

你也可以试试这个border-radius CSS-generator找到最适合你的属性。

来源

2012-02-24 21:37:34

不幸的是，这将在各种地方，如渐变和图像，我不能使角落变白。是的，这会有很大的帮助。 – 2012-02-24 22:07:56

@ToddDavis用另一种解决方案更新了我的答案。不知道它是否适用于这种情况（取决于您需要使用圆角支持哪些浏览器）。 – 2012-02-24 22:25:39

谢谢。我更喜欢CSS圆角，但本例中的设计师设计了一些我需要使用的自定义边框。另外它需要IE6的支持。周围没什么好玩的，但是你去吧。 – 2012-02-24 22:40:37

您的容器中的css display: inlinediv的空白任何设置为width。使用display: block; float: left; margin: 0 XXpx;作为您的div（XX是两侧图像的宽度）。

编辑：具体，这将是：

div#yourdiv { 
    background-image: url("images/module_header_bg.jpg"); 
    color: white; 
    display: block; 
    float: left; 
    font-weight: bold; 
    height: 42px; 
    width: auto; 
}

和都的img标签

img { 
    float: left; 
}

这为您的内容创建一个动态大小的盒子，或者你设置的div宽度如width: 300px而不是width: auto。

来源

2012-02-24 21:40:30 kontur

删除内联（从之前的尝试，以使其工作，感谢捕捉），修复了高度等问题的大小问题。浮动左边帮助，如果我删除宽度：100％。然而宽度继续破坏布局。我尝试使用正值和负值设置左右两侧的边距，但似乎仍在继续运行。我会尽快重新上传结果。 – 2012-02-24 22:10:33

查看我的具体代码更新。 – kontur 2012-02-25 13:22:41

删除下面的行：

显示：内联;

除了在这种情况下无用（因为浮动内联行为已经工作），“内联”属性不允许您设置元素的宽度或高度。为了更清楚地理解，请阅读w3c's article。

来源

2012-02-24 21:43:46

谢谢 - 显示内联已被删除，并修复了高度。但宽度仍然是一个问题。 – 2012-02-24 22:13:16

两张浮动图像之间的DIV尺寸不正确

回答

相关问题