3 колонки с встроенным блоком не работают - элементы div выстроены неправильно

0

У меня есть 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);
}
  • 1
    Это небольшой проект, который вы только начинаете, где вы можете добавить глобальное правило на данном этапе? * {box-sizing: border-box}? потому что это изменило бы то, как я бы предложил вам разобраться с этим.
  • 0
    К сожалению, это сайт, который близок к завершению, но мне пришлось добавить больше контента и поэтому решил переделать весь макет
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Основная проблема здесь заключается в том, что вы используете "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; (который имеет некоторые проблемы) или поплавок, который обертывает себя, чтобы заставить их жить в одном и том же мире снова, потому что плавание выводит элементы из регулярного потока.

В случае, если вы можете использовать размер окна, вам все равно придется беспокоиться о границах (они не перемещаются внутри коробки). Таким образом, вам нужно будет иметь их в процентах или получить еще один причудливый способ сделать последовательную ширину желоба, но так как у вас есть статический размер сайта - я не собираюсь вникать в это.
Вот скрипка без всех ваших стилей - чтобы показать, как это работает.

HTML

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


CSS

*, *: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;
}
  • 0
    спасибо, что было чрезвычайно полезно
  • 1
    Я рад. Я не хотел путать вещи, но обратите внимание на ситуацию .column : чем больше общих стилей вы можете использовать в качестве модулей многократного использования, тем более глобальный контроль у вас будет. И я предлагаю не указывать id , кроме как для javascript, так как они позже усложнят иерархию.
Показать ещё 18 комментариев
0

Вы указали 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+ */
}
  • 0
    Это не научит ОП, что происходит или как это исправить. Ссылка на что-то, что на самом деле объясняет блочную модель, и краткое описание того, как это может помочь ОП, было бы отличным ответом. Если вы собираетесь использовать размер блока, то вы можете также начать использовать его для всего, в этом случае - вам необходимо полностью понять, что это означает в глобальном масштабе.
0

Это должно делать то, что вы хотите:

#main div {
    float: left;
}
  • 2
    Если бы вы только начинали, поможет ли вам этот ответ?
  • 0
    спасибо, но это не помогает мне, дочерние элементы уже находятся в ряду, проблема в том, что они расположены по-разному по высоте
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню