Макет CSS - выравнивание двух разделов бок о бок

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

#page-wrap { margin 0 auto; }

Это хорошо работает. Второй div, который я хотел бы позиционировать в левой части центральной страницы, но я не могу это сделать, используя float, хотя я уверен, что это возможно.

Может быть, лучше показать пример того, что я описываю:

Проблема с макетами http://pauljarratt.co.uk/images/problemimage.jpg

Я хотел бы нажать красный div рядом с белым div.

Вот мой текущий CSS, касающийся этих двух div, боковая панель - красный div и обтекание страницы - белый div:

#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
    }

#page-wrap  {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
    }

Любая помощь будет оценена.

Ответы

Ответ 1

Если вы завернули свои div, вот так:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

Вы можете использовать этот стиль:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

Это немного другой взгляд, хотя, поэтому я не уверен, что вам нужно. Это будет центрировать все 800px как единицу, а не 600px с центром с 200px с левой стороны. Основной подход заключается в том, что ваши боковые панели плавают влево, но внутри основного div, а #page-wrap имеет ширину боковой панели, так как она оставила поле для перемещения так далеко.

Обновление, основанное на комментариях:. Для этого нецентрированного взгляда вы можете сделать это:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

С этим стилем:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

Ответ 2

Я не понимаю, почему Nick использует margin-left: 200px; вместо того, чтобы плавать другой div в left или right, я только что изменил его разметку, вы можете использовать float для обоих элементов вместо margin-left.

Демо

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Кроме того, я использовал .clear:after, который вызывает родительский элемент, чтобы просто очистить родителя.

Ответ 3

Это может быть выполнено с помощью свойства стиля.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

Его результат будет:

Наслаждайтесь... Обратите внимание: это работает в более высокой версии CSS ( > 3.0).

Ответ 4

Это также можно сделать без оболочки - div # main. Вы можете центрировать # -страницу страницы с использованием поля: 0 auto; и затем используйте левый: -n; метод для размещения #sidebar и добавления ширины # обертки страницы.

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

Однако боковая панель исчезнет за пределами окна просмотра браузера, если окно было меньше содержимого.

Второй ответ лучше второго, потому что он также более удобен в обслуживании, так как вам не нужно настраивать #sidebar, если вы хотите изменить размер # page-wrap.

Ответ 5

Самый простой способ - обернуть их как в container div, так и применить margin: 0 auto; к контейнеру. Это будет центрировать как теги #page-wrap, так и #sidebar на странице. Однако, если вы хотите, чтобы этот внешний вид выглядел, вы можете сдвинуть container 200px влево, чтобы учесть ширину div #sidebar.

Ответ 6

HTML-код для трех div-выравнивания бок о бок и может использоваться для двоих также некоторыми изменениями

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSS будет

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

Этот код будет работать в ответном макете, поскольку он изменит размер

<div>

в соответствии с шириной устройства. Даже кто-то может молчать кого-нибудь

<div>

<!--<div id="third">third</div> -->

и может использовать остальные два для двух

<div>

бок о бок.