Размещение нескольких 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 Я искал Google и StackOverFlow, и я не мог найти ответ, который был бы полезен. Было много вопросов о размещении двух div в одном div, но ни одно из них не предназначалось для выравнивания нескольких div в одном div.

Спасибо за любую помощь заранее!

источник

2013-03-22 corecase

Да мой плохой. Просто исправил это. – corecase

Не могли бы вы предоставить JSFiddle? Проблема заключается в том, что все ваши плавающие дочерние divs имеют ширину 25% + границу 1px. Вы можете использовать 'box-sizing: border-box' для его решения. – powerbuoy

Это исправленный человек, спасибо в любом случае! – corecase

Я бы сделал две вещи, избавлюсь от полей на ваших плавающих 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

Я думаю, что проблема, которую вы испытываете, является то, что вам нужно, чтобы очистить поплавки. Это может быть не самый лучший способ сделать это, но для упрощения добавьте это: <div style="clear:both;"></div> после последнего <div> внутри вашего контейнера (#navBar).

источник

2013-03-22 02:29:52 dezman

Основной вопрос, который я видел, с помощью CSS является то, что вы добавляете в полях для каждого элемента с плавающей точкой. Это имело бы смысл, если бы оно было позиционировано абсолютно. Так как это не будет, divs будет стекаться. Удаление полей позволит дивы, чтобы поместиться в контейнере:

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

ответ

Смежные вопросы