HTML 和 CSS 中的流畅 3 列布局

Question

我正在使用 HTML 和 CSS 处理基本的 3 列布局。我的列向左浮动，所以当我调整窗口的宽度时，列逐渐“折叠”。即首先 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