HTML 和 CSS 中的流体 3 列布局

Question

我正在使用基本的 3 列布局，使用 HTML 和 CSS。我的列向左浮动，所以当我调整 window 的宽度时，列逐渐 "collapse"。即首先，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

HTML 和 CSS 中的流体 3 列布局

Fluid 3-Column Layout in HTML & CSS

html

css

layout

multiple-columns

fluid-layout