如何在外部div內聯內制作2 div？

Question

該jsFiddle具有我已實現的代碼。 我有一個div ，其中應包含2 div 。

最外面的div的width必須為100% ，每個內部div的width:50%必須為width:50% 。 問題是內部div堆棧彼此重疊。 如果我將任一width更改為49% ，則它們是inline ，但底部似乎有某種填充。

我試圖float:left兩個內div ，這讓內div的內聯但隨后的外div的高度不會根據內部高度自動調節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%

檢查演示

更新：

只需刪除display: inline-block; 來自兩個divs DEMO

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

這是固定的小提琴 。

否則，我建議研究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之間.box-one了回車符。 這表示為塊之間的空格字符。

我在此Codepen http://codepen.io/magpie/pen/QwzNYe中說明了四個選項：

1：如果要使用display: inline-block ，則可以在.outer div上設置font-size: 0並將其重置為子div。 然后，“空間”字面上的寬度將為零像素，一切都將適合。 顯然，如果.outer div包含文本，則將無法使用。 另一種選擇是簡單地刪除Daniel表示的子div之間的回車。

2：您可以使用浮點數，但.outer div的高度會折疊。 為了解決這個問題，請應用clearfix或簡單地將overflow: hidden到.outer

3：您可以通過將display: table應用於.outer和display: table-cell應用於子級來使用偽造的表布局。 您需要指定.outer div的100％寬度。

4：最簡單的就是使用flexbox。 使.outer div display: flex和.outer ！ 這些天的支持非常好：請訪問http://caniuse.com以獲得支持和必要的供應商前綴。

Answer 6

刪除子元素之間的空白。 （請參閱這篇文章 ）

小提琴

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

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