將多個Div（並排）放在父代Div中

我的目標是在一個「容器」div中放置四個div。這裏是我到目前爲止的代碼：將多個Div（並排）放在父代Div中

HTML

<body> 
    <div id="navBar"> 
     <div id="subDiv1"> 
     </div> 
     <div id="subDiv2"> 
     </div> 
     <div id="subDiv3"> 
     </div> 
     <div id="subDiv4"> 
     </div> 
    </div> 
</body>

CSS

#navBar 
{ 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 

#subDiv1, #subDiv2, #subDiv3, #subDiv4 
{ 
    width: 25%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
} 
#subDiv1 
{ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
    margin-left: 0%; 
} 
#subDiv2 
{ 
    float: left; 
    margin-left: 25%; 
} 
#subDiv3 
{ 
    float: left; 
    margin-left: 50%; 
} 
#subDiv4 
{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
    margin-left: 75%; 
}

據我知道這是我的代碼的唯一部分是有關我的問題，所以我留下一些其他部分..不要介意navBar的寬度和邊距，因爲它實際上也在另一個容器中。

P.S我搜查谷歌和StackOverFlow，我找不到有用的答案。關於在一個div中放置兩個div有很多問題，但是沒有一個用於在一個div內對齊多個div。

感謝您提前提供任何幫助！

來源

2013-03-22 corecase

呀我的壞。只是修復它。 – corecase 2013-03-22 02:26:47

你能提供一個JSFiddle嗎？問題似乎是，所有浮動的子div都是25％寬度+ 1px邊框。你可以使用'box-sizing：border-box'來解決它。 – powerbuoy 2013-03-22 02:44:39

這是固定的男人，謝謝！ – corecase 2013-03-22 02:45:45

我會做兩件事，擺脫浮動div的邊距，並添加箱子尺寸規則。

jsFiddle example

#navBar { 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 
#subDiv1, #subDiv2, #subDiv3, #subDiv4 { 
    width: 25%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
    box-sizing:border-box; 
} 
#subDiv1 { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
} 
#subDiv2 { 
    float: left; 
} 
#subDiv3 { 
    float: left; 
} 
#subDiv4 { 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
}

來源

2013-03-22 02:34:10 j08691

沒關係，最後的評論！謝謝，這工作正常！ – corecase 2013-03-22 02:41:19

您可以使用display: table

.menu { 
    display: table; 
    width: 100%; 
    border: 1px solid black; 
    border-right: none; 
    box-sizing: border-box; 
} 
.menu > div { 
    display: table-row; 
    background-color: green; 
} 
.menu > div >div { 
    border-right: 1px solid black; 
    display: table-cell; 
    text-align: center; 
} 

@media screen and (max-width: 400px) { 
    .menu { 
     display: block; 
     float: left; 
     width: auto; 
     border: none; 
    } 
    .menu > div { 
     display: block; 
    } 
    .menu > div > div { 
     border: none; 
     padding-right: 10px; 
     display: block; 
     text-align: left; 
    } 
}

fiddle

來源

2013-03-22 02:29:42

爲什麼要教他使用表格？ – dezman 2013-03-22 02:30:14

不是表格，而是顯示錶格。感覺差異 – 2013-03-22 02:30:31

好的，好吧，我想它是很好的意識到你的選擇。 – dezman 2013-03-22 02:31:23

我想你所遇到的問題，就是你需要清除浮動。這可能不是最好的方法，但爲了簡單起見，在您的容器（#navBar）中最後一個<div>之後加上： <div style="clear:both;"></div>。

來源

2013-03-22 02:29:52 dezman

，我跟你的CSS看到的主要問題是，你在每個浮點項目保證金增加。如果它被絕對定位，這將是有意義的。既然不是divs會堆棧。卸下利潤率將允許的div以適應容器：

http://jsfiddle.net/eGLTM/

#navBar 
{ 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 

#subDiv1, #subDiv2, #subDiv3, #subDiv4 
{ 
    width: 24%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
} 
#subDiv1 
{ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
    margin-left: 0%; 
} 
#subDiv2 
{ 
    float: left; 
} 
#subDiv3 
{ 
    float: left; 
} 
#subDiv4 
{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
}

來源

2013-03-22 02:35:01 munch1324

將多個Div（並排）放在父代Div中

回答

相關問題