Как центрировать основной div по горизонтали и по-прежнему иметь div слева от него

#css #positioning #center #css-position

#css #позиционирование #центр #css-position

Вопрос:

я ищу лучший способ сделать следующее:

 --------------------------|--------------------------
|                                                   |
|    --------  -------------------------            |
|    | menu |  |                       |            |
|    |      |  |                       |            |
|    --------  |       #content        |            |
|              |                       |            |
|              |                       |            |
|              |                       |            |
|              -------------------------            |
|                                                   |
|                                                   |
--------------------------|--------------------------
  

Div #content центрируется по горизонтали, фиксированная ширина. Div #menu прилипает к левой стороне #content .

На данный момент у меня есть оба divs внутри div #wrap , ширина которого равна #content и margin:auto . Я позиционирую #menu абсолютный и присваиваю ему отрицательное значение margin-left . Но таким образом, если окно браузера становится меньше, #menu не возникает горизонтальная полоса прокрутки (что должно быть сделано по соображениям удобства использования).

Спасибо за лучшее решение!

Ответ №1:

просто используйте что-то вроде этого

 <div class="wrapper">

  <div id="content">
    <!-- content -->
    <div id="menu">
    <!-- menu content -->
    </div>
  </div>

</div>
  

Где «оболочка» изменит ширину вашего макета. все остальное то же самое, за исключением того, что я предпочитаю left:-200px, например, вместо margin-left:-200px; для «menu»…

конечно, «меню» должно быть абсолютным для «содержимого» и т.д. «Содержимое» — это позиция: относительная.

Комментарии:

1. Делая это по-своему, div .wrap был бы центрирован, что означает центрирование всего макета, а не только div # content?

2. вы можете разместить «оболочку» там, где хотите, слева, справа, по центру, … это ваш выбор, если вы предоставите как можно больше информации о том, что вы делаете, возможно, мы сможем помочь вам в дальнейшем, …

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

Ответ №2:

При условии, что все значения ширины фиксированы, попробуйте это: http://jsfiddle.net/hvrzx /

Для этого требуется один дополнительный div, но удаляется все позиционирование. Вычислите margin-left of #innerwrap , используя следующую формулу: (o c)/2-i , где o — ширина #outerwrap , c — ширина #content и i — ширина #innerwrap .

Изменение #innerwrap ширины влияет на разрыв между #menu и #content .

Ответ №3:

Работает ли это? на листе css

 #menu {overflow:scroll};
  

Комментарии:

1. Не совсем, это повлияло бы на содержимое #menu.