親Div内に複数のDivを並べる（

）私の目標は、1つの「container」div内に4つの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%; 
}

I他の部分を残しました。実際に別のコンテナ内にあるので、navBarの幅とマージンに気をつけません。

P.S私はGoogleとのStackOverflowを検索し、私は参考になりました答えを見つけることができませんでした。 1つのdiv内に2つのdivを配置することについて多くの質問がありましたが、1つのdiv内に複数のdivを配置するためのものはありませんでした。

事前にお問い合わせいただきありがとうございます。

出典

2013-03-22 corecase

をうん私の悪いです。ちょうどそれを固定した。 – corecase

JSFiddleを提供できますか？問題は、浮動小数点のdivがすべて幅25％+ 1px境界にあるように見えます。あなたはそれを解決するために 'box-sizing：border-box'を使うことができます。 – powerbuoy

それは固定された男、とにかくありがとう！ – corecase

私は、2つのことを行うあなた浮かべ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

あなたは私はあなたが持っている問題は、あなたがあなたのフロートをクリアする必要があるということだと思い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

テーブルではなく、テーブルを表示します。違いを感じてください –

さて、よく、あなたのオプションを知っているのは良いと思います。 – dezman

を使用することができます。これはそれを行うための最善の方法でもよいが、simplicitiesのために、この追加しない場合があります：あなたのコンテナ（#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を並べる（

答えて

関連する問題