#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.