第 3 个 div 和 clearfix 的位置不起作用

Question

我正在制作一个网站等等，直到现在我都没有遇到任何问题。我不能像我想的那样去做。这是我的截图：在大型显示器上：http://i.imgur.com/6KdDMPw.png all good, but when it gets to tablets it looks like that: http://i.imgur.com/jilzKD5.png 这就是我想要实现的目标。 div clearfix hack 不起作用，我将他粘贴在中间块之后（第一个屏幕截图）。

我认为这不是什么大问题，但我找不到，谢谢帮助:)

#container {
  width: 800px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

#one,
#two,
#three {
  width: 48%;
  overflow: hidden;
  float: left;
}

#one {
  height: 200px;
  background: red;
}

#two {
  height: 500px;
  background: green;
}

#three {
  height: 100px;
  background: blue;
}

.clearfix {
  display: block;
  zoom: 1;
}

.clearfix::after {
  content: "";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div class="clearfix"></div>
  <div id="three"></div>
</div>

Answer 1

您想将部分浮动在左侧 left，并在右侧浮动部分 right，然后禁用 .clearfix (display: none;)

#container {
  width: 800px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

#one,
#two,
#three {
  width: 48%;
  overflow: hidden;
  float: left;
}

#one {
  height: 200px;
  background: red;
}

#two {
  height: 500px;
  background: green;
  float: right;
}

#three {
  height: 100px;
  background: blue;
}

.clearfix {
  display: none;
  zoom: 1;
}

.clearfix::after {
  content: "";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div class="clearfix"></div>
  <div id="three"></div>
</div>

第 3 个 div 和 clearfix 的位置不起作用

Position of 3rd div and clearfix is not working

html

css

responsive