Question

我正在构建一个响应式网站，并且在使用浮动容器时遇到了问题。我希望它有四个div直接相邻，没有间隙，没有div移动到较小的屏幕/窗口上。我尝试了各种各样的技术，但似乎都没有。容器最大应为960px x 460px，因为每个div的高度均为460px，组合宽度总计为960px。

Answer 1

试用font-size hack：http://jsfiddle.net/andunai/bbek5rq6/

或使用Bootstrap。

删除空格的想法是将这些空格的font-size设置为0px。

Answer 2

您可能希望使用网格框架来简化响应式布局的开发：

我非常喜欢可以与Stylus或SCSS一起使用的Jeet预处理器框架。

Answer 3

我同意使用框架会让您的生活更轻松。要回答您的问题，最简单的解决方案是为父级设置最大宽度，然后为子级使用百分比。

HTML

<div class="wrapper">
  <div class="quarter red">
  </div>
  <div class="quarter green">
  </div>
  <div class="quarter blue">
  </div>
  <div class="quarter">
  </div>  
</div>

CSS

.wrapper {max-width:960px;}
.quarter {width:25%;height:460px;background:#EEE;float:left;}
.red {background:#990000;}
.green {background:#006600;}
.blue {background:#333366;}

您可以在此处查看此代码：http://codepen.io/anon/pen/KwdjXo

使用占位符图片更新了codepen：http://codepen.io/anon/pen/LEGNYe

Answer 4

您是否考虑过超级整洁的柔性布局？

.wrap {
  max-width: 960px;
  height: 460px;
  display: flex;
}
.wrap div {
  flex: 1;
}

<div class="wrap">
  <div style="background:red"></div>
  <div style="background:blue"></div>
  <div style="background:lime"></div>
  <div style="background:cyan"></div>
</div>

如何在容器中浮动4个响应div？

4 个答案: