Fatal编程技术网
  • css/
  • CSS 3列，为什么第三列要取代其他2列？

CSS 3列，为什么第三列要取代其他2列？

css

CSS 3列，为什么第三列要取代其他2列？,css,Css,下面是最少量的代码，清楚地说明了我的问题： <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> </

下面是最少量的代码，清楚地说明了我的问题：

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


一个
两个
三
前两个div应该是两个左列。第三个应该占据页面的其余部分。最后，我将添加隐藏和显示左侧两列的选项

但是，为什么紫色会一直延伸到浏览器的左边缘？我试图让它从单词“三”开始。你也需要“浮动”第三列。然后在其后面添加一个清除块。

您还需要“浮动”第三列。然后在其后面添加一个清除块。

请参见W3C：

在块格式设置上下文中，每个框的左外缘与包含块的左边缘接触（对于从右到左的格式设置，右边缘接触）。即使在存在浮动的情况下也是如此（尽管框的行框可能会因浮动而收缩），除非框建立新的块格式上下文（在这种情况下，框本身可能会因浮动而变窄）

您可以通过强制创建新的阻塞格式上下文来避免这种情况：

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

我必须承认，浮动的行为有时会令人困惑。

请参见W3C：

在块格式设置上下文中，每个框的左外缘与包含块的左边缘接触（对于从右到左的格式设置，右边缘接触）。即使在存在浮动的情况下也是如此（尽管框的行框可能会因浮动而收缩），除非框建立新的块格式上下文（在这种情况下，框本身可能会因浮动而变窄）

您可以通过强制创建新的阻塞格式上下文来避免这种情况：

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

我必须承认，浮动的行为有时会令人困惑。

根据第一列和第二列消失时您希望发生的情况，您有以下几种选择：

1） 如果希望第3列展开并填充所有剩余空间，只需添加
overflow:hidden到第三个div的样式。它将按照您的预期在两个浮动div旁边流动


2） 如果希望第三列无论第1列和第2列发生什么情况都保持其大小和形状，请将其向右浮动，并设置宽度，例如
float:right；宽度：200px，它将不再受其他两列的影响，而是保持200px在容器的右边缘。
根据第一列和第二列消失时希望发生的情况，您有几个选项：

1） 如果希望第3列展开并填充所有剩余空间，只需添加
overflow:hidden到第三个div的样式。它将按照您的预期在两个浮动div旁边流动


2） 如果希望第三列无论第1列和第2列发生什么情况都保持其大小和形状，请将其向右浮动，并设置宽度，例如
float:right；宽度：200px和它将不再受其他两个的影响，而是停留在容器的右边缘200px。
可能更适合此操作可能更适合此操作如果进行浮动，第三列将不会占用页面的其余部分。抱歉-错过了问题的这一部分。如果您知道页面的宽度，那么只需在第三列设置宽度，并在隐藏其他列时调整宽度。如果您需要扩展第三列以适应浏览器窗口，无论其宽度如何，您都可能需要使用表格。无需表格，请使用我在回答中提到的
overflow:hidden
。我发现您的回答允许扩展第三列，这很酷。OP说他需要显示/隐藏左2列，这意味着如果其中一列或两列都被隐藏，容器div上的填充将是错误的。他需要使用脚本来调整数字。如果他需要动态调整左列的大小，这将变得更加复杂，然后可能需要一个表。Yaggo，你有一个很好的答案。在这个特殊的例子中，表格就是我所使用的方式，因为我需要它不换行，但也不隐藏溢出。如果使用浮点，第三列将不会占用页面的其余部分。对不起，我错过了问题的这一部分。如果您知道页面的宽度，那么只需在第三列设置宽度，并在隐藏其他列时调整宽度。如果您需要扩展第三列以适应浏览器窗口，无论其宽度如何，您都可能需要使用表格。无需表格，请使用我在回答中提到的
overflow:hidden
。我发现您的回答允许扩展第三列，这很酷。OP说他需要显示/隐藏左2列，这意味着如果其中一列或两列都被隐藏，容器div上的填充将是错误的。他需要使用脚本来调整数字。如果他需要动态调整左列的大小，这将变得更加复杂，然后可能需要一个表。Yaggo，你有一个很好的答案。在这个特殊的例子中，表是我的方式，因为我需要它不包装，但也不隐藏溢出。

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