Question

此jsFiddle包含我已实施的代码。我有一个div，其中包含2个div，应该是内联的。

{（1}}中最外层的div必须为100%，每个内部width必须为div。问题是内部width:50%堆叠在彼此之上。如果我将其中任何一个div更改为width，那么他们就会49%，但似乎从底部会出现某种填充。

我在内部inline上尝试了float:left，这使内部div内联，但外部div的高度获胜了＃39} ; t根据内div的高度自动调整。我该如何解决？

Answer 1

.outer {
  background-color: green;
  width: 100%;
  float:left;
}

.box-one {
  width: 50%;
  background-color: red;
  height: 179px;
  float: left;
}

.box-two {
  width: 50%;
  background-color: blue;
  height: 179px;
  float: left;
}

Answer 2

同时提供first和second div width:50%

检查DEMO

<强>更新

只需从两个div DEMO

中删除display: inline-block;即可

Answer 3

您可以让容器overflow:hidden快速包含浮动元素

 #container {
   width: 100%;
   background-color: #ffcc33;
   margin: auto;
   overflow: hidden;
  }

 #first {
   width: 50%;
   float: left;
   height: 300px;
   background-color: blue;
 }
 #second {
   width: 50%;
   float: left;
   height: 300px;
   background-color: green;
 }

这是固定的fiddle。

否则我建议您查看clearfix。

Answer 4

也许这就是你要找的东西？

.outer {
  background-color: green;
  display: table;
  width: 100%;
}
.box-one {
  background-color: red;
  height: 200px;
  display: table-cell;
}
.box-two {
  background-color: blue;
  height: 200px;
  display: table-cell;
}

<div class="outer">
  <div class="box-one"></div><div class="box-two"></div>
</div>

Answer 5

你的两个div不适合的原因是inline-block尊重空格。您在.box-one和.box-two之间有回车。这将呈现为块之间的空格字符。

我在此codepen http://codepen.io/magpie/pen/QwzNYe中说明了四个选项：

1：如果您想使用display: inline-block，可以在font-size: 0 div上设置.outer并为子div重置它。然后是空间＆＃39;在字面上会占据零像素的宽度，一切都会适合。显然，如果.outer div包含文本，这将无法正常工作。另一个选择是简单地删除孩子div之间的回车，如Danield所示。

2：您可以使用浮动，但.outer div将在高度上崩溃。要解决此问题，请应用clearfix或overflow: hidden至.outer

3：您可以将display: table应用于.outer和display: table-cell给孩子使用假表布局。您需要指定.outer div的100％宽度。

4：最简单的是使用flexbox。制作.outer div display: flex并瞧！如今支持非常好：检查http://caniuse.com以获取支持和必要的供应商前缀。

Answer 6

删除子元素之间的空白区域。（见this post）

FIDDLE

＆＃13;

.outer {
  background-color: green;
  width: 100%;
}
.box-one {
  width: 50%;
  background-color: red;
  height: 200px;
  display: inline-block;
}
.box-two {
  width: 50%;
  background-color: blue;
  height: 200px;
  display: inline-block;
}

＆＃13;

<div class="outer">
  <div class="box-one"></div><div class="box-two"></div>
</div>

＆＃13;

如何在外部div内联中制作2个div？

6 个答案: