Question

我有一个父div，它跨越浏览器的宽度，每边都有填充。然后我在这个父母中有2个浮动div。他们都被设置为向左浮动。第一个有一个设定的宽度，第二个我想要跨越剩余的父母遗留下来。当我在第二个浮动div上放置背景颜色时，它只显示为div中文本的宽度。我怎样才能让它从第一个浮动div中跨过左边。

UPDATE 好的，这是一个显示设置的jsfiddle。 JSFIDDLE LINK 即使您缩放浏览器，具有红色背景的div也应该跨越父级的其余部分。

Answer 1

鉴于您希望子div元素中的第二个元素是父元素的完整剩余宽度，您不需要float它。鉴于以下加价：

<div id="parent">
    <div id="one">The first div, fixed width</div>
    <div id="two">The second, taking up the rest of the space.</div>
</div>

和CSS：

#parent {
    width: 90%; /* adjust to taste */
    padding: 10px;
    background-color: #ffa; /* just to see where each element is in the document */
    overflow: hidden; /* to ensure the parent encloses the floated child div */
}

#one {
    float: left;
    width: 100px; /* whatever width you need */
    background-color: red; 
}
#two {
    background-color: #f90;
}

这似乎可以提供您正在寻找的效果：JS Fiddle demo，但仅在Ubuntu 11.04上的Chromium 17中进行了测试。

已编辑以回应OP的评论，如下所示：

当我从我的第二个div或我的.sitle的jsfiddle示例中删除浮动时，背景填充整个父级。不确定我做错了什么......

问题在于，float - ed元素已从文档流中取出，而第二个div（JS Fiddle中的.title）延伸到“后面”它

要防止您需要从第二个div中移除float（它仍然存在于您发布的链接中），并且还要向margin-left元素提供.title，为了防止它占据全宽：

.title{
    padding: 17px 20px 0;
    background-color: red;
    height:54px;
    margin-left: 200px;    
}

JS Fiddle demo

如果您因任何原因无法提供margin-left，则可以在height: 100%; - float上使用div（{{1} }），虽然这是有问题的，因为填充（假定元素的高度被定义 - 高度+填充）：

.time

JS Fiddle demo

要更正.time{ padding: 17px 20px 0; float:left; margin-right: 20px; height: 100%; background-color: black; }问题，在兼容的浏览器中，您可以使用height CSS属性将box-sizing包含在padding中：

height

JS Fiddle demo

Answer 2

使用简单的css是不可能的。要么你使用的桌面布局不是很整洁 - 要么你做了一个javascript修复，这也不是很好但是我会说更好的解决方案。

尽管如此：如果它对bgcolor或类似的东西很重要，你可以做一些变通办法。是吗？

Answer 3

我认为你能做的最好的事情就是找出剩下的空间是什么，并将第二个div设置得那么宽。既然你说第一个div无论如何都是一个设定的宽度，那么第二个div也不能成为一个设定的宽度。

Answer 4

如果您将左侧div设置为固定宽度并向左浮动（如您所述），则可以将下一个div的边距设置为第一个div的宽度，并确保它不浮动。例如：

#left_div{
float: left;
width: 180px;
}

#right_div
{
margin-left: 200px;
}

这应该可以正常工作。

Answer 5

根据大卫托马斯回答你的评论后面的jsfiddle链接。这是经过调整的css。

.holder{
 color:#fff;
 clear:both;
 width: 100%;
 background-color:#2d2f31;
 height: 70px;
 padding-bottom: 1px;
 margin: 12px 0;
}

.time{
padding: 17px 20px 0;
float:left;
margin-right: 20px;
height: 54px;
background-color:#2d2f31;
}
.title{
padding: 17px 20px 0;
background-color: red;
height:54px;         
}
.title span{
display:block;
font-size:12px;
line-height: 1.25em;
color:#646464;
}

浮动div跨越父母宽度

5 个答案: