У меня есть div, который содержит три дочерних div, и по какой-то причине первый дочерний div правильно помещается внутри своего родителя, но два других ребенка расположены ниже от первого ребенка. Чем больше содержимого я добавляю к первому ребенку, тем ниже остальные дети становятся расположенными относительно верхней части родителя контейнера.
Heres jfiddle показывает вам мою проблему: http://jsfiddle.net/gY72a/7/
трое детей arent на той же самой линии здесь, но вы можете видеть проблему, когда смотрите на то, насколько высокий первый ребенок расположен по сравнению со вторым.
Код уже находится в jfiddle, но вот css, который я использую:
/*Parent div in which all three children are nested*/
#main {
width: 80%;
min-width: 1000px;
background-color: #FFFFFF;
margin: 1% auto;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*First child*/
#leftside {
display: inline-block;
width: 18%;
margin: 10px 1% 8px;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
/*Second Child*/
#innermain {
display: inline-block;
width: 50%;
margin: 10px 1% 8px;
padding:1em;
background-color: #eaeaea;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*Third child*/
#rightside {
width: 20%;
min-width: 320px;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 1% 8px ;
border-radius: 1px;
border: 1px solid rgba(0, 0, 0, 0.15);
}
Основная проблема здесь заключается в том, что вы используете "display: inline-block", а также используете комбинацию процентов и полей с ems. Теперь теоретически вы можете иметь 3 блока и добавлять их ширину и дополнение, а также маржа - для всех равных 100, но даже если вы хотите пройти этот маршрут, вы используете метод встроенного блока, который по умолчанию оставляет небольшое нежелательное пространство между каждым блоком и отбрасывает это число. Помимо этого, отступы и поля добавляются к размеру окна, поэтому, если у вас есть поле шириной 20% и имеет отступы 1em и маржу 1%, то это 20% +2% +2 em (+total ширина границы) - и что это значит? Ну, я не знаю, и браузер тоже не любит заниматься этим, потому что в зависимости от размера окна это число будет другим. Итак, если вы хочу знать проблему, это факторы, которые приводят к проблемам.
Если вам нужно решение, у вас есть несколько маршрутов, но они зависят от того, что вам нужно делать. Не похоже, что вы строите этот сайт быстро. Итак, в этом случае вы работаете с холстом шириной 1000 пикселей. - и в этом случае нет причин, по которым вы не можете просто использовать px для добавления поля margin/padding/box и т.д. равным 100. оставить поля как display: block;
и поплавать их влево.
Если вы хотите войти в настоящее и начать использовать немного современного материала - вы должны прочитать о box-sizing: border-box
Что это значит, это изменить модель окна, чтобы прокладка и границы ящиков перемещались внутри коробки и поэтому не добавляет к нему размер. Это действительно здорово и делает работу с css приятной. Тогда вам не нужно добавлять вещи, чтобы определить размер коробки. - поэтому - если вам не нужна поддержка IE 7, я бы предложил вам сделать это стандартным в вашем общем подходе к CSS с этого момента. http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Если вы собираетесь поместить столбцы в свою "обертку", то эта оболочка больше не будет распознавать их одинаково, поэтому вам придется искать clearfix для div или использовать overflow: hidden; (который имеет некоторые проблемы) или поплавок, который обертывает себя, чтобы заставить их жить в одном и том же мире снова, потому что плавание выводит элементы из регулярного потока.
В случае, если вы можете использовать размер окна, вам все равно придется беспокоиться о границах (они не перемещаются внутри коробки). Таким образом, вам нужно будет иметь их в процентах или получить еще один причудливый способ сделать последовательную ширину желоба, но так как у вас есть статический размер сайта - я не собираюсь вникать в это.
Вот скрипка без всех ваших стилей - чтобы показать, как это работает.
<div class="content-wrapper">
<div class="column what">
<h2>What We do</h2>
<p>Bla bla bla</p>
</div>
<div class="column main-content">
<h2>Latest News and Events</h2>
</div>
<div class="column where">
<h2>Where To Find Us</h2>
</div>
</div> <!-- .content-wrapper -->
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
overflow: hidden; /* should be clearfix instead */
}
.column { /* what the columns have in common */
float: left;
padding: 1em;
}
.what {
width: 25%;
margin-right: 1%;
background-color: orange;
}
.main-content {
width: 48%;
margin-right: 1%;
background-color: yellow;
}
.where {
width: 25%;
background: red;
}
.column
: чем больше общих стилей вы можете использовать в качестве модулей многократного использования, тем более глобальный контроль у вас будет. И я предлагаю не указывать id
, кроме как для javascript, так как они позже усложнят иерархию.
Вы указали display:inline-block
для div
ниже, который должен правильно выровнять их в строке с указанными ширинами. Но width
принимается раздел содержимого в div
и div
добавляет margin
, данное им при ширине. Вот почему блоки прыгают друг под друга.
Когда вы применяете box-sizing: border-box;
к div
s, будет вычисляться ширина div, включая margin
предоставленную соответствующему div
s. Надеюсь, это поможет вам.
#main, #leftside, #innermain{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Это должно делать то, что вы хотите:
#main div {
float: left;
}