将 3 个 div 列的布局更改为 2 个 div 列和下面的第 3 个答案

【问题标题】：Changing layout of 3 div columns to 2 div columns and 3rd one below将 3 个 div 列的布局更改为 2 个 div 列和下面的第 3 个
【发布时间】：2017-01-05 07:48:50
【问题描述】：

当设备宽度低于 900 像素时，我正在尝试重新排列 3 个 div。它们排列为三列（2 个浮动 div 和中间的主要 1 个），我不知道如何使它们成为 2 列和它们下方的第三个 div（Image 显示我的目标）。提前谢谢你:)

按照您的要求添加代码:) 这里是 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>

这里是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;

}

如果我让正确的 div 浮动：none 那么它会移动中间的 div

【问题讨论】：

欢迎来到 StackOverflow！你试过什么？还请发布最少的代码以向我们展示您拥有的内容。
您可能会提供一个小小提琴，以便我们可以直接帮助您。
我添加了一些代码希望它可以帮助您了解我的想法
感谢您的欢迎！

标签： html css

【解决方案1】：

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

享受

【讨论】：

【解决方案2】：

使用媒体查询和flex。

这是一个 sn-p，（点击运行然后全屏）。

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

【讨论】：

我建议你不要使用 display flex，因为在 IE 9 上，它不起作用caniuse.com/#search=flex
成功了.. 感谢您的帮助！在接受之前，我会等着看其他人是否有其他答案...
我的投票不会改变公开显示的分数，因为我的分数不到 15

【解决方案3】：

欢迎来到{以不祥的声音}RESPONSIVE DESIGN 的世界！ ,

要执行您想做的事情，您需要探索Media Queries。

这是您尝试做的一个示例：JSFiddle

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

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

祝你好运！

【讨论】：

【解决方案4】：

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

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

【讨论】：

嗯，这个答案是实际答案/评论之间的界限；你真的应该等到 OP 发布更多信息。
您可以将我的答案添加到您的代码中，只需将 float left 添加到名为“left”和“middle”的 id 中，并通过添加 clear: both 来重新定义媒体查询内部的“right”：就像我说过。当然，还必须为宽度 > 900px 的设备定义 right。 Ced 上面发布的另一个解决方案很有趣。晚安（？）。

【解决方案5】：

这是我的看法。

/* 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>

【讨论】：