1

我有这个 html 标题的主要div (紫色),它分成 2 个其他 div,包含徽标(红色)和右侧的一些其他信息(绿色)

我对紫色有一个明确的修复,它使红色绿色都很好地浮动,两者都向左浮动。

这里的问题是我正在努力寻找一种让绿色适合整个宽度的方法

在这种情况下,红色本身具有199px固定宽度,并且没有绿色的宽度声明

外部紫色div 也没有固定宽度,目前65%的divbody具有流畅的布局

所以我的问题是:如何用css使绿色 div扩展直到紫色结束? div

我试图申请width:86%绿色但它没有工作,因为红色有一个固定的价值......

我想也许有一些类似display:table-cell/table-row或类似的表格显示模式可以解决问题,但它们似乎都没有按照我想要的方式工作。

如果你能帮助我,那就太好了:)

4

3 回答 3

2

这可能不漂亮,但它应该工作。

  1. 将红色 div 绝对定位在 0,0
  2. 将 199px 的 padding-left 添加到紫色 div
  3. 从红色和绿色 div 中删除浮动
于 2011-03-11T17:34:50.337 回答
0

只需float: left在红色 div 上使用 a 就可以了。

http://jsfiddle.net/Jk5BE/2/

于 2011-03-11T17:39:38.733 回答
0

对于此类问题,这是我最喜欢的解决方案,奖励是它甚至不使用包装器,并且您可以添加其他列(尽管在您的情况下看起来需要包装,因为这看起来像标题):

http://www.alistapart.com/d/holygrail/example_4.html

您也可以非常简单地使用一个简单的浮点数来做到这一点:

http://jsfiddle.net/W3DEC/

于 2011-03-11T17:39:52.740 回答