html - 如何使用纯 CSS 设置响应式列？

Question

我使用以下 HTML 标记在我的页面中制作 3 列:

<div id="container">
     <div id="sidebar-left"></div>
     <div id="content"></div>
     <div id="sidebar-right"></div>
</div>

这些列使用此 CSS 设置样式:

#container{width:100%}
#sidebar-left, .sidebar-right{width:25%;float:left}
#content{width:50%;float:left}

输出结果类似于 <1200px 宽度的左图。

/image/VEopK.jpg

现在我正在尝试为小于 1200 像素的宽度进行响应式设计，类似于右图，但我无法在侧边栏顶部获取内容 DIV。我曾尝试更改 DIV 的顺序，但无济于事。

有什么办法吗？

Answer 1

我认为使用 flexbox 是最好的选择；如果你想要支持较小的浏览器，你可以这样做:

   #content{background:green;width:100%;}
   #sidebar-right, #sidebar-left{
     background:pink;
     width:50%;float:left;
   }
   
   @media only screen and (min-width:1200px){
    #sidebar-right, #sidebar-left{ 
      width:25%;
    }
    
    #content{
      width:50%;
      margin-left:25%;
      float:left;
    }
    
    #sidebar-left{
      margin-left:-75%
    }
    
   } 

<div id="container">
    
    <div id="content"><p>Lorem ipsum dolor sit amet consectetuer Quisque Ut Curabitur cursus sem. Integer volutpat eget tempor pulvinar Curabitur interdum Curabitur justo morbi tincidunt. Nec diam mauris adipiscing Integer Vestibulum tincidunt Suspendisse id mauris tortor. Fusce Aenean ac Lorem lorem quis tellus eu enim In id. Congue rhoncus eu Duis libero In cursus congue enim nibh laoreet. Donec nunc tellus Ut Nullam interdum dapibus malesuada turpis vitae.</p>
<p>Dui Quisque magnis interdum In ante interdum dignissim Vestibulum elit wisi. Ut Sed justo adipiscing In Vestibulum nulla et congue Nunc feugiat. Adipiscing sit id tortor ultrices vel rhoncus quis nunc nec ut. Lacus adipiscing quis tortor ornare eu Phasellus Aenean eleifend auctor pede. Porttitor tempus quam sapien adipiscing Nullam diam dolor interdum nibh adipiscing. Vestibulum dolor nibh fringilla id Vestibulum pulvinar Morbi consectetuer ut In. Malesuada sollicitudin.</p>
</div>
    <div id="sidebar-left"><p>In augue malesuada amet Phasellus ipsum orci lobortis arcu aliquam wisi. Nibh nisl lacinia Mauris neque Nam id et congue elit Integer. Mauris risus In Aliquam vitae ut est vel ut feugiat enim. Laoreet urna Vestibulum suscipit aliquam orci libero risus elit ut eget. Nibh tempus tristique tincidunt eu nibh ridiculus eleifend massa orci Aenean. Lacinia odio Vivamus.</p>
</div>

    <div id="sidebar-right"><p>Tincidunt wisi Aenean at lorem turpis gravida Curabitur neque magna sed. Orci et dictumst ligula volutpat amet mauris leo lacus ac ante. Sed fermentum ac leo nunc laoreet sociis massa platea Sed ultrices. Elit vitae tempus interdum a mollis cursus elit senectus Quisque sed. Adipiscing id semper dis sed justo congue quis tincidunt vel sit. Vitae.</p>
</div>

</div>