Css 两个浮动图像之间的DIV大小不正确

我需要使用设计师创建的自定义图像创建一个对话框。为了便于讨论，这是我申请的正确答案。对话框必须能够承受宽度和高度的变化。这对于一个表来说很容易做到，但是我想保持一个无表的设计，所以我想我可以使用3行DIV来做到这一点。例如，将图像向左浮动，将图像向右浮动，然后在图像与背景之间放置一个DIV，以便可以在其上输入文本

下面是我失败尝试的演示：只显示了一行

正如你所看到的，这几乎奏效了。但是中间的div只是它里面的内容的大小，尽管我已经设置了高度和宽度。我需要保持宽度的灵活性

---

有没有办法解决这个问题？

如果你将图像的圆角变成白色而不是透明，你可以将背景图像应用到标题标签上，而不是中间的div。这会给人一种印象，即中间的div与两幅图像的高度相同

更新

如果可能，根据您需要支持的浏览器，您可以使用CSS3的border radius属性进行圆角处理，而不是使用图像。这大概是：

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;
}

您也可以尝试这样做，以找到最适合您的属性。

容器div中的css display:inline将取消任何宽度设置。使用显示：块；浮动：左；保证金：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标签

---

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

删除以下行：

显示：内联

---

由于floats inline属性不允许您设置元素的宽度或高度，因此在这种情况下，内联行为除了毫无用处之外，还可以正常工作。为了更清楚地理解，请阅读。

除非您计划在未来十年左右使用该URI，否则您可能会尝试隔离代码并使用粘贴箱发布代码，以便将来的读者可以关注问题并给出答案。不幸的是，这将在不同的位置进行，例如渐变和图像，对我来说，我不能使角落变白。“是的，那会很有帮助。”托达维斯用另一种解决方案更新了我的答案。不知道它是否适用于这种情况，但这取决于您需要支持哪些圆角浏览器。谢谢。我更喜欢CSS圆角，但本例中的设计师设计了一些我需要使用的自定义边框。此外，它还需要IE6的支持。虽然不是很有趣，但还是有了。从以前的尝试中删除了内联，以实现这一点，感谢您抓住了这一点，修复了高度等方面的大小问题。如果我删除了宽度，将其向左浮动会有所帮助：100%。但是，宽度继续破坏布局。我试着在左边和右边设置边距，使用正数和负数，但它似乎一直在运行。我将尝试在稍后重新上传结果。谢谢-显示内联已被删除，这将修复高度。但宽度仍然是一个问题。

img {
  float: left;
}