html - HTML 和 CSS 中的流体 3 列布局

Question

我正在使用基本的 3 列布局，使用 HTML 和 CSS。我的列向左浮动，所以当我调整窗口宽度时，列逐渐“折叠”。即首先，col-3 将在 col-1 下折叠，然后 col-2 将在 col-1 下折叠。

HTML:

<div id="col2">
    <p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. <a href="">Market-facing</a> drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>

<div id="col3">
    <p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>

CSS:

body {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto; }

#col1, #col2, #col3 {
    float: left;
    width: 30%;
    margin: 10px;
    min-width: 200px; }

我希望发生的事情是这样的。在指定的宽度下，3 列将直接折叠成 1 列(col1 高于 col2 高于 col3)，而不是它们一次移动一列。

这可以用 HTML 和 CSS 完成吗，还是需要其他语言？我该如何实现？

Answer 1

你可以使用

body {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
#col1, #col2, #col3 {
    float: left;
    width: 30%;
    margin: 10px;
    min-width: 200px;
}
@media (max-width: 768px) { /*set here you specified width*/
    #col1, #col2, #col3 {
        width: 100%;
    }
}

<div id="col3">
    <p>3333We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whle swamp.</p>
</div>
<div id="col2">
    <p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. <a href="">Market-facing</a> drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>
<div id="col3">
    <p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>

Here a jsfiddle example to play with

如果您的 div#col 中的内容确实是文本，而不仅仅是一个示例，我真的建议您使用:CSS3 Multiple Columns