Fluid 3-Column Layout в HTML и CSS

Question

Я работаю с базовым расположением трех столбцов, используя 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; } 

То, что я хотел бы произойти это. При указанной ширине три столбца будут сворачиваться непосредственно в 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

Если содержание внутри сОн # седловины действительно текст, а не просто пример, который я очень рекомендую вам использовать: CSS3 Multiple Columns