将3个div列的布局更改为2个div列，下面的第3个列-Changinglayoutof3divcolumnsto2divcolumnsand3rdonebelow

0  

Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,

欢迎来到{以不祥的声音}响应设​​计的世界！ ，

To perform what you are trying to do you will need to explore Media Queries.

要执行您要执行的操作，您需要探索媒体查询。

Here is an example of what you are trying to do: JSFiddle

以下是您要尝试的示例：JSFiddle

HTML

HTML

  

   left content flexible width
  
  

   right content fixed width
  
  

   Bottom content flexible width
  

CSS

CSS

.container {
  height: 100px;
  overflow: hidden;
}

.left {
   float: left;
  background: #00FF00;
  width: 25%;
  overflow: hidden;
  height: 100%;
}

.right {
  display: inline-block;
  width: 50%;
  background: #0000ff;
  height: 100%;
}

.bottom {
  float: right;
  background: #ff0000;
  display: inline-block;
  width: 25%;
  height: 100%;
}

@media only screen and (max-width: 900px) {
  .container {
    height: auto;
    overflow: hidden;
  }
  .left {
    float: left;
    background: #00ff00;
    width: 25%;
    overflow: hidden;
    height: 100px;
  }
  .right {
    float: none;
    width: 75%;
    background: #0000ff;
    height: 100px;
  }
  .bottom {
    position: relative;
    float: none;
    background: #ff0000;
    width: auto;
    overflow: hidden;
    height: 50px;
    display: inherit;
  }
}

Good luck!

祝你好运！

1  

You need to use media queries https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您需要使用媒体查询https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Enjoy

请享用

1  

With media queries and flex.

使用媒体查询和flex。

Here is a snippet, (click on run then full screen).

这是一个片段，（点击运行然后全屏）。

    
1
    
2
    
3

    .flex{
        display: flex;
        flex-wrap: wrap;
    }
    .c{
      height:20px;
      width:20px;
      border: 1px solid green;
      box-sizing: border-box;
      }

    @media(max-width:600px){
     .sub{
        width: 50%;
      }
     .doge{
        width: 100%
      }
    }

0  

It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.

看到你的源代码告诉你为什么它没有工作会很有帮助。至少你可以更详细地描述它。否则我会怀疑这一点：两者都可以通过在媒体查询中重新定义div类来帮助你。至少这对我有用。

As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.

作为一个例子，您可以为左列添加float：left，然后在右侧跟随中间列。通过使用clear重新定义右列（类）：右列将成为页脚。这只是一个例子，并不是最好的解决方案。

0  

Here's my take on it.

这是我的看法。

/* Styles go here */

body,html{
  margin: 0;
  padding: 0;
  height:100%;
}


.wrapper{
  height:100%;
  width:100%;
  padding: 20px;
}

.div1{
  height:100%;
  width:30%;
  float:left;
  background-color:orange;
}

.div2{
  height:100%;
  width:30%;
  float:left;
  margin-left:2%;
  background-color:red;
  
}

.div3{
  height:100%;
  width:30%;
  margin-left:2%;
  float:left;
  background-color:green;
}

@media(max-width:900px){
  
  .wrapper{
  height:100%;
  width:100%;
  clear:both;
}
  
  .div1{
    height:70%;
    width:49%;
    float:left;
    background-color:orange;
  }
  
  .div2{
    height:70%;
    width:49%;
    float:left;
    background-color:red;
    
  }
  
  .div3{
    height:30%;
    width:100%;
    float:left;
    margin:20px 0 20px 0;
    background-color:green;
  }
  
}