it-swarm.com.ru

Выравнивание двух делителей бок о бок

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

#page-wrap { margin 0 auto; }

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

Я хотел бы выдвинуть красный 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;
}
45
Ronnie

Если вы завернули свои 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;
}
74
Nick Craver

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

Demo

#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, который вызывает родительский элемент, просто чтобы самостоятельно очистить родительский элемент.

15
Mr. Alien

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

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

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

enter image description here

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

7
Mark Macneil Bikeio

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> 

бок о бок.

3
Dr Amit Sehgal

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

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.

2
matharden

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

1
Michael Herold