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宽度的左图像。

https://i.stack.imgur.com/VEopK.jpg

现在我正在尝试为宽度小于1200像素的响应式设计，类似于右图，但我无法将内容DIV放在侧边栏之上。我试图改变DIV的顺序，但没有帮助。

有没有这样做？

Answer 1

您还可以使用flexbox及其order属性来获得所需的结果。检查这个jsfiddle：https://jsfiddle.net/yvgb440v/

Answer 2

方法＃01：

您可以使用css3 flexbox。以下HTML结构可用于使用flexbox创建所需的布局。

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

＆＃13;

#container {
  display: flex;
  height: 200px;
}

#content {
  background: green;
  padding: 20px;
  flex-grow: 1;
}

.sidebar {
  background: pink;
  padding: 20px;
}

.sidebar.left {
  margin-right: 20px;
}

.sidebar.right {
  margin-left: 20px;
}

@media only screen and (max-width: 1200px) {
  #container {
    flex-wrap: wrap;
  }
  #content {
    margin-bottom: 20px;
    width: 100%;
    order: -1;
  }

  .sidebar {
    flex-grow: 1;
  }
}

＆＃13;

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

＆＃13;

方法＃02：

您可以使用css2表属性来创建此布局。此后需要HTML个结构：

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

＆＃13;

* {
  box-sizing: border-box;
}
#content {
  overflow: hidden;
}

.content-holder,
.sidebar {
  height: 100px;
}

#content {
  overflow: hidden;
}

.content-holder {
  background: green;
  padding: 20px;
}

.sidebar {
  background: pink;
  padding: 20px;
}

.sidebar.left {
  margin-right: 20px;
  float: left;
}

.sidebar.right {
  margin-left: 20px;
  float: right;
}

@media only screen and (max-width: 1200px) {
  #container {
    display: table;
    width: 100%;
  }
  #content {
    display: table-header-group;
  }
  .content-holder {
    margin-bottom: 20px;
  }

  .sidebar.left,
  .sidebar.right {
    width: 48%;
  }
  .sidebar.left {
    margin-right: 2%;
  }
  .sidebar.right {
    margin-left: 2%;
  }
}

＆＃13;

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

＆＃13;

Answer 3

以下是CSS Flexbox和@media查询的一种方法：

body {
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}

.sidebar {
flex: 0 0 25vw;
}

.content {
flex: 0 1 50vw;
}

.left {
background-color: rgb(255,0,0);
}

.container {
background-color: rgb(255,255,0);
}

.right {
background-color: rgb(0,0,255);
}

@media only screen and (max-width:1200px) {

.content {
flex: 1 0 100vw;
order: 0;
}

.sidebar {
flex: 1 0 50vw;
order: 1;
}

}

<div class="container">
<div class="sidebar left"></div>
<div class="content"></div>
<div class="sidebar right"></div>
</div>

Answer 4

我认为使用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>

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

4 个答案: