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

Question

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

Этот вопрос уже имеет ответ здесь:

Выровняйте <отделение> элементы рядом 3 ответа

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

#page-wrap { margin 0 auto; }

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

Я хотел бы увеличить красное отделение вместе с белым отделением.

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

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

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

45

css css3 css-float

задан TylerH 19 February 2018 в 14:47

3 ответа

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

1

ответ дан 26 November 2019 в 21:05

Это также можно сделать без оболочки - div # main. Вы можете центрировать # page-wrap, используя margin: 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

ответ дан 26 November 2019 в 21:05

Другие вопросы по тегам:

css css3 css-float

Похожие вопросы:

score 74 · Accepted Answer

Если вы обернули свои 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;
}

Это немного другой вид, поэтому я ' Я не уверен, что это то, что тебе нужно. Это будет центрировать все 800 пикселей как единое целое, а не 600 пикселей по центру с 200 пикселей с левой стороны. Базовый подход заключается в том, что ваша боковая панель перемещается влево, но внутри основного 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;
}