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列（col3上方col2上方的col1），而不是一次移动一列。

可以使用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> 

这是一个jsfiddle示例

如果div＃col中的内容确实是文本，那么我不仅仅建议您使用以下示例： CSS3 Multiple Columns