web-dev-qa-db-ja.com

親Div内に複数のDivを（並べて）配置する

私の目標は、1つの「コンテナ」div内に4つの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 GoogleとStackOverFlowを検索しましたが、役立つ回答が見つかりませんでした。 1つのdiv内に2つのdivを配置することについては多くの質問がありましたが、1つのdiv内に複数のdivを配置することについては質問がありませんでした。

事前に助けてくれてありがとう！

csshtmlcss-floatalignment
6
corecase

私は2つのことをします。フロートされたdivのマージンを取り除き、ボックスサイズ設定ルールを追加します。

jsFiddleの例

#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;
}
12
j08691

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

フィドル

1
zb'

私があなたのcssで見た主な問題は、各フロートアイテムにマージンを追加することです。これは、絶対に配置されていれば意味があります。そうではないので、divはスタックします。余白を削除すると、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;
}
1
munch1324

あなたが抱えている問題は、フロートを片付ける必要があるということだと思います。これは最善の方法ではないかもしれませんが、簡単にするために、コンテナ内の最後の<div style="clear:both;"></div>の後に<div>を追加します（#navBar）。

0
dezman