Question

我正在建立一个网站等等，我现在没有任何问题。我不能像我想的那样去做。这是我的截图：在大型显示器上：http://i.imgur.com/6KdDMPw.png一切都很好，但当它到达平板电脑时，它看起来像是：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的位置不起作用

1 个答案: