7

私の目標は、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の幅とマージンは、実際には別のコンテナー内にもあるため、気にしないでください。

PS GoogleとStackOverFlowを検索しましたが、役立つ回答が見つかりませんでした。1つのdiv内に2つのdivを配置することについては多くの質問がありましたが、1つのdiv内に複数のdivを配置することについては質問がありませんでした。

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

4

4 に答える 4

13

フロートdivのマージンを取り除き、ボックスサイズ設定ルールを追加するという2つのことを行います。

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;
}
于 2013-03-22T02:34:10.347 に答える
1

私があなたの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;
}
于 2013-03-22T02:35:01.713 に答える
1

使用できます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;
    }
}

フィドル

于 2013-03-22T02:29:42.297 に答える
0

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

于 2013-03-22T02:29:52.333 に答える