Question

假设我们有3个列的响应式设计（所有3个都是动态内容，所以我们不知道它们的高度）

对于桌面：

平板电脑（左栏向右移动）

我们实现这一目标的最佳方式是什么？（我不介意使用flexbox或其他现代css规范）

Answer 1

您可以在桌面上制作float: left元素，每个元素的宽度为1/3，然后在平板电脑/移动设备上为它们提供50％宽度，并使1和3 float: right。

HTML：

<div class="b1">
  1
</div>
<div class="b2">
  2
</div>
<div class="b3">
  3
</div>

CSS：

div {
  float: left;
  width: calc(100%/3);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  div {
    width: 50%;
  }
  .b1,
  .b3 {
    float: right;
  }
}

Working JSFiddle

Answer 2

＆＃13;

div{
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  float: left;
}
.div1{
  background : yellow;
  width: 25%;
}
.div2{
  background : red;
  width: 50%;
  min-height: 400px;
}
.div3{
  background : purple;
  width: 25%;
}
@media (max-width: 768px){
  .div1, .div3{
clear: right;
float: right;
width: 30%;
  }
  .div2{
width: 70%;
  }
}

＆＃13;

<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>

＆＃13;

https://jsfiddle.net/yuywh5gv/

Answer 3

试试这个，它可能会有所帮助。您可以根据需要编辑CSS

HTML code：

<div class="wrapper">
  <div class="left"> 1 </div>
  <div class="middle">2 </div>
  <div class="right"> 3 </div>
</div>

CSS代码：

.wrapper div {float:left;margin-right:.5%;text-align:center;}
.wrapper div:last-child {margin-right:0;}
.left {background: yellow; width:33%}
.middle {background: green; width:33%}
.right {background: blue; width:33%}

Answer 4

＃仅手机屏幕和（最大宽度：320px）＃平板电脑屏幕和（最小宽度：321px）和（最大宽度：768px）＃桌面屏幕和（最小宽度：769px）

  <div class="b1 col" >1</div>
  <div class="b2 con">2</div>
  <div class="b3 col">3</div>

添加样式bellow ::

       div {
           border: 2px solid black;
           padding: 20px;
           float: left;
           box-sizing: border-box;
       }

       .con{
           width: 66.66%;
        }

       div.col {
                width: 16.5%;
       }

       .b1 {
            height: 50px;
            border-color: #ee8;
       }

       .b2 {
            height: 200px;
            border-color: #fcc;
       }

       .b3 {
            height: 80px;
            border-color: #caf;
        }

        @media screen and (min-width:321px) and (max-width:768px)  {
        div.col {
           width: 33.33%;
        }
        .b1,
        .b3 {
          float: right;
        }
  }

DEMO

响应式布局，其中左列可能向右移动

4 个答案: