CSS 3列，为什么第三列接管其他2？

这里的代码量最小，清楚地说明了我的问题：CSS 3列，为什么第三列接管其他2？

<html> 
<body> 
    <div style="float: left; width: 200px;">One</div> 
    <div style="float: left; width: 200px;">Two</div> 
    <div style="background-color: #f0f;">Three</div> 
</body> 
</html>

第2周的div应该是2左列。第三应该占据页面的其余部分。最后，我要添加选项来隐藏和显示左侧的2列。

但是，为什么紫色一直延伸到浏览器的左边缘？我试图从“三”一词开始。

来源

2010-04-01 Matt Dawdy

http://doctype.com/可能更适合这个 – 2010-04-01 20:28:29

您还需要'浮动'第三列。然后在它后面添加一个清理块。

来源

2010-04-01 20:29:01 Ray

我现在想哭。 – 2010-04-01 20:34:22

如果浮动，第三栏不会占用页面的其余部分。 – jholster 2010-04-01 21:06:59

对不起 - 错过了这部分问题。如果知道页面的宽度，则只需在第三列上设置宽度，并在隐藏其他列时调整宽度。如果需要将第三列扩展为适合浏览器窗口，则无论宽度如何，都可能需要使用表格。 – Ray 2010-04-01 21:53:04

参见Block formatting contexts由W3C：

在块格式化上下文中，每个盒的左侧外边缘接触到包含块的左边缘（从右到左的格式化，右边缘的触摸）。即使存在浮点数（虽然由于浮点数，框的线框可能会缩小），但这种情况也是如此，除非框中建立了新的块格式上下文（在这种情况下，由于浮点数，框本身可能变得更窄）。

可避免迫使新的阻塞格式化的内容的创作：

<div style="background-color: #f0f; overflow: hidden">Three</div>

如果overflow: hidden是不适合你（弹出窗口等）的选择，这里是另一种技术：

<div class="has-columns"> 
    <div class="column first">...</div> 
    <div class="column second">...</div> 
    <div class="column third">...</div> 
</div>

.has-columns { 
    padding-left: 400px; /* padding reserved for floats */ 
} 

.column.first { 
    width: 180px; 
    margin-left: -400px; 
    float: left; 
} 

.column.second { 
    width: 180px; 
    margin-left: -200px; 
    float: left; 
}

我不得不承认，花车的行为有时会令人困惑。

来源

2010-04-01 20:50:42 jholster

根据你想拥有的栏时，一个和两个消失了，你有几种选择发生的事情：

1）如果要列3至扩展和填充所有剩余空间只需添加overflow: hidden;的风格第三个分区。它会像您期望的那样流向两个浮动div。 2）如果你想让第三列保持它的大小和形状，不管第1列和第2列发生什么情况，将它浮动到右边，设置宽度如float: right; width: 200px;，它不再受到另外两个，但在容器的右边缘保持200px。

来源

2010-04-02 00:32:20

CSS 3列，为什么第三列接管其他2？

回答

相关问题