DIVs не выстраиваются в линию

Я создал jsfiddle для вас, чтобы увидеть, что я делаю.DIVs не выстраиваются в линию

#page-wrapper { 
margin-left: 205px; 
background-color: green; 
}

Обертка меню (оранжевый) и страница обертка (зеленый) оба должны быть в верхней части обертки содержимого (синий). Но зеленый блок имеет верхний край (а это не так).

Мой вопрос заключается в следующем: почему оранжевые и зеленые блоки не выравниваются в верхней части синего блока?

Является ли какой-то из моего кода CSS неправильным? Спасибо за ваш вклад!

источник

2016-04-13 pkSML

Если я удаляю 'overflow: auto; height: auto ', блоки будут выстраиваться в линию, но синяя родительская коробка сжимается до высоты 0px. Это тоже проблема ... – pkSML

вы хотите создать сетку? – mmativ

Тег 'div' имеет стиль по умолчанию ** display: block **, и у вас также есть поля слева на обертке страницы. См. Update fiddle https://jsfiddle.net/3mp1Lnw8/7/, я просто удаляю маржи- левый и добавленный тег ap также в * обертке меню * –

Это по умолчанию margin из p тега, который толкает зеленый div вниз.

HTML { 
 
    background: #cccccc; 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
#bounding-wrapper { 
 
    min-width: 320px; 
 
    width: 100%; 
 
    padding: 10px; 
 
} 
 

 
#content-wrapper { 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow: auto; 
 
    height: auto !important; 
 
    background-color: blue; 
 
} 
 

 
#menu-wrapper { 
 
    width: 200px; 
 
    background-color: orange; 
 
    float: left; 
 
} 
 

 
#page-wrapper { 
 
    margin-left: 205px; 
 
    background-color: green; 
 
} 
 
    p{ 
 
margin: 0 0 20px; 
 
    }

<div id="bounding-wrapper"> 
 
    <div id="content-wrapper"> 
 
<div id="menu-wrapper"> 
 
    this is in the menu wrapper 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p> 
 
</div> 
 
<!-- menu wrapper --> 
 
<div id="page-wrapper"> 
 
    <p>this is in the page wrapper</p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum, 
 
</div> 
 
<!-- page wrapper --> 
 
    </div> 
 
    <!-- content wrapper --> 
 
</div> 
 
<!-- bounding wrapper -->

источник

2016-04-13 05:09:45

Спасибо @afelixj! Вы полностью поняли мой вопрос! Я рад, что ответ был таким простым. Это приводит меня к другому вопросу: почему фон div не окружает поля абзаца внутри div? – pkSML

http://codepen.io/craigiswayne/pen/mPxJqv

** Позволяет использовать гибкий коробки **

CSS:

.block{ 
    width:100px; 
    height:100px; 
    background-color:#8BC34A; 
} 

.block.fill{ 
    background-color:#F44336; 
    -webkit-flex: 1; 
      flex: 1; 
} 

.container { 
    display: -webkit-flex; 
    display: flex; 
    width:100%; 
}

источник

2016-04-13 05:02:51

Спасибо за ваше предложение. Единственное, что мне все еще нужно, это чтобы зеленый квадрат имел свою ширину, переходя к правому краю родительского div. – pkSML

скорректировал код соответственно @pkSML –

Вы должны плавать как menu-wrapper и page-wrapper.

Похоже на то, что вы добавили правильный запас, который вы пытаетесь расположить в левом меню? Если так что вы могли бы сделать что-то вроде этого: https://jsfiddle.net/jgoley/98abyyp2/

источник

2016-04-13 05:10:05 jgoley

jsfiddle

#page-wrapper { 
    float:left; 
    background-color: green; 
}

использование поплавка: левый вместо marigin оставил

источник

2016-04-13 05:26:47

Я думаю, что код ниже должен работать для вас!

Все, что я добавил, было display: inline-block; - #menu-wrapper и #page-wrapper.

Все, что я удалил, было float: left; от #menu-wrapper и margin-left: 205; от #page-wrapper.

\t HTML { 
 
\t background: #cccccc; 
 
\t box-sizing: border-box; 
 
\t } 
 
\t 
 
\t *, 
 
\t *:before, 
 
\t *:after { 
 
\t box-sizing: inherit; 
 
\t } 
 
\t 
 
\t #bounding-wrapper { 
 
\t min-width: 320px; 
 
\t width: 100%; 
 
\t padding: 10px; 
 
\t } 
 
\t 
 
\t #content-wrapper { 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t overflow: auto; 
 
\t height: auto !important; 
 
\t background-color: blue; 
 
\t } 
 
\t 
 
\t #menu-wrapper { 
 
\t width: 200px; 
 
\t background-color: orange; 
 
\t display: inline-block; 
 
\t } 
 
\t 
 
\t #page-wrapper { 
 
\t background-color: green; 
 
\t display: inline-block; 
 
\t }

<div id="bounding-wrapper"> 
 
    <div id="content-wrapper"> 
 
    <div id="menu-wrapper"> 
 
     this is in the menu wrapper 
 
    </div> 
 
    <!-- menu wrapper --> 
 
    <div id="page-wrapper"> 
 
     <p>this is in the page wrapper</p> 
 
    </div> 
 
    <!-- page wrapper --> 
 
    </div> 
 
    <!-- content wrapper --> 
 
</div> 
 
<!-- bounding wrapper -->

Надеется, что помогли!

источник

2016-04-13 05:38:47

у вас есть два решения,

вы можете установить на display свойство #page-wrapper быть display:inline-block
, если вы не хотите, чтобы изменить его свойство display по какой-либо причине так вы можете добавить float:left к #page-wrapper а

тогда нет необходимости в margin-left:205px в #page-wrapper

источник

2016-04-13 06:58:28

DIVs не выстраиваются в линию

ответ

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