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

I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at). Thank you in advance :)

当设备宽度低于900px时，我正在尝试重新排列3个div。它们被安排为三列（2个浮动div和主要的一个在中间），我不知道如何使它们成为2列和它们下面的第三个div（图像显示了我的目标）。先谢谢你：）

Adding code as you asked :) here is html

你问的问题添加代码:)这里是html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
  <header></header>
  <div id="left"></div>
  <div id="right"></div>
  <div id="middle"></div>
</div>
</body>
</html>

and here is css

这是css

#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;

}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;

}

if i make right div float:none then it moves the middle div

如果我做正确的div浮动：无，那么它移动中间div

5 个解决方案

#1

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

<div class="container">
  <div class="left">
   left content flexible width
  </div>
  <div class="right">
   right content fixed width
  </div>
  <div class="bottom">
   Bottom content flexible width
  </div>
</div>

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!

祝你好运！

#2

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

请享用

#3

With media queries and flex.

使用媒体查询和flex。

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

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

<div class="flex">
    <div class="sub c">1</div>
    <div class="sub c">2</div>
    <div class="doge c">3</div>
</div>

    .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%
      }
    }

<div class="flex">
  <div class="sub c"></div>
  <div class="sub c"></div>
  <div class="doge c"></div>
</div>

#4

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重新定义右列（类）：右列将成为页脚。这只是一个例子，并不是最好的解决方案。

#5

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;
  }
  
}

<div class="wrapper">
      <div class="div1"><p></p></div>
      <div class="div2"><p></p></div>
      <div class="div3"><p></p></div>
</div>

#1