如何在內部外部div內製作2個div？

這個jsFiddle包含我已經實現的代碼。我有一個div其中包含2 div應該內聯。

最外面的div必須是100%的width，每個內部的div必須有width:50%。問題是彼此之間堆疊的內部div。如果我將width中的任何一個更改爲49%，那麼它們是inline，但似乎存在某種底部的填充。

我在內div都試圖float:left這讓內div的直列但隨後的外div的高度不會根據內div的高度自動地調節。我如何解決它？如何在內部外部div內製作2個div？

來源

2015-03-19 Siddharth Thevaril

也許這是你在找什麼？

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

來源

2015-03-19 12:29:34 iacobalin

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

來源

2015-03-19 11:47:19 ASHU

請檢查我再次提供的鏈接，我意外地將它鏈接到其他一些小提琴之前。 – 2015-03-19 11:52:41

嗨Sidsec使用此css – ASHU 2015-03-19 12:09:40

賦予這兩個first和second DIV width:50%

檢查DEMO

更新：

只是從兩個div的去除display: inline-block;DEMO

來源

2015-03-19 11:48:19 Manwal

請檢查我再次提供的鏈接，我意外地將它鏈接到其他小提琴之前。 – 2015-03-19 11:52:20

查看已更新回答 – Manwal 2015-03-19 11:58:01

您只需將T他集裝箱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。

來源

2015-03-19 11:49:18

請檢查我再次提供的鏈接，之前我無意中將它鏈接到了其他小提琴。 – 2015-03-19 11:52:24

同樣的解決方案只適用於id不同的類名，除非我誤解了這個問題。 – 2015-03-19 11:56:47

刪除子元素之間的空白區域。（見this post）

FIDDLE

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

來源

2015-03-19 12:03:12 Danield

你的兩個div不適合的原因是inline-block方面的空白。你有回車.box-one和.box-two之間。這被渲染爲塊之間的空格字符。

你有我在此codepen http://codepen.io/magpie/pen/QwzNYe已經說明了四個選項：

1：如果你想使用display: inline-block，您可以在.outer DIV設置font-size: 0並重置爲孩子申報單。然後，'空間'將在字面上佔據零像素的寬度，並且一切都將適合。顯然，如果.outer div將包含文本，這將不起作用。另一種選擇就是像丹菲爾德所表明的那樣，簡單地去掉子div之間的回車。

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獲取支持和必要的供應商前綴。

來源

2015-03-19 13:56:23 surreymagpie

如何在內部外部div內製作2個div？

回答

相關問題