Question

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

以下是尝试执行此操作失败的演示:(仅显示一行） http://www.seaburydesign.com/rounded/demo.html

正如你所看到的，这几乎可以正常工作。但是中间的DIV只是其中内容的大小，即使我已经设置了高度和宽度。我需要保持宽度灵活。

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

Answer 1

如果您将图像的圆角设为白色而不是透明，则可以将背景图像应用于标题标记而不是中间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;
}

您也可以尝试使用border-radius CSS-generator找到最适合您的属性。

Answer 2

容器display: inline中的css div对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。

Answer 3

删除以下行：

显示：内联;

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

两个浮动图像之间的DIV没有正确调整大小

3 个答案: