Как бы вы реализовали этот HTML / CSS макет?

#html #css #positioning #centering

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

Вопрос:

Допустим, у вас есть очень простой дизайн по центру, div размером 500 пикселей по центру в окне просмотра с margin: 0 auto; :

 |<- auto ->  ------  500px  -----  <- auto ->|
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|            --------------------            |

и затем вы хотели добавить небольшой элемент навигации слева

 |<- auto ->  ------  500px  -----  <- auto ->|
|   --------|                    |           |
|  | 200px  |                    |           |
|  |        |                    |           |
|  |        |                    |           |
|  |        |                    |           |
|   --------|                    |           |
|           |                    |           |
|            --------------------            |

но как бы вы это сделали, чтобы основной div был сосредоточен на странице?

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

Каковы ваши решения?

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

Ответ №1:

Вот, пожалуйста, я использовал несколько меньших размеров, чтобы это хорошо смотрелось в JSFiddle. Очевидно, что вы можете изменить размер в своем окончательном дизайне. (основной width:500px и боковой width:200px и left:-200px )

ДЕМО:
http://jsfiddle.net/2GN9M/1

HTML

 <div class="main">
    <div class="side">
    </div>
</div>

CSS:

 .main {
    width: 150px;
    margin: auto;
    height: 150px;
    background: red;
    position: relative;
}

.side {
    position: absolute;
    left: -50px;
    top: 10px;
    width: 50px;
    height: 100px;
    background: blue;
}

1. Если вы публикуете ответ с помощью jsfiddle, пожалуйста, опубликуйте ответ и здесь для будущих читателей.

2. @Gazler, хорошая мысль, я как раз этим и занимался, когда вы добавляли свой комментарий. 🙂

3. этот метод с min-width на элементе body, если вы не хотите потерять из виду «сторону», когда окно сужается — min-width должен быть content width (2 x side width)

Ответ №2:

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

http://jsfiddle.net/yVHzU/

 <div id="center">Center<div id="left">left</div></div>

CSS:

 #center
{
margin: 0 auto;
background-color: #ff0000;
width: 500px;
}

#left
{
    margin-left: -200px;
    background-color: #ffff00;
    width: 200px;
}

Отрицательные поля допустимы для css.
http://www.w3.org/TR/CSS2/box.html#margin-properties

Ответ №3:

попробуйте что-то вроде

 <div id="Wrapper"><div id="nav"></div></div>

#nav { position:absolute; left:-200px; width:200px;}
#wrapper { position:relative; width:500px; margin: 0 auto; }

Ответ №4:

Вы могли бы придать вашему div размером 200 пикселей стиль {position: absolute;top: 50px; left: 200px; }

Возможно, вам потребуется поместить div размером 200 пикселей внутри другого div, для которого установлен атрибут position.

Ответ №5:

Сделайте левый бит дочерним элементом основного div, установите position: absolute , а затем установите left: -200px .

Ответ №6:

Вы могли бы сделать это … мне просто не очень нравится использовать цифры с минусом. Старый Ie может быть забавным

 <div id="nav"></div>
<div id="main"></div>

 #nav {

float:left;
margin-top:10px;
width: 50px;
height: 100px;
background: blue;
}

#main {
float:left;
width: 150px;
height: 150px;
background: red;
}

возможно, вам понадобится <div style=»очистить: оба;»></div> в нижней части