позиционирование трех дел с CSS - PullRequest
Новая
       27

позиционирование трех дел с CSS

3 голосов
/ 25 сентября 2008

Кто любит загадки? ;)

У меня есть три деления: 

<div id="login" />
<div id="content" />  
<div id="menu" />

Как бы я определил стили CSS (не касаясь HTML), чтобы меню-div в качестве левого столбца, логин-div в правом столбце и content-div также в правом столбце, но под логином- отд.

Ширина каждого div фиксирована, а высота - нет.

Ответы [ 2 ]

6 голосов
/ 25 сентября 2008 
#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}

Почему так? Последнее в разметке меню делает его жестким. Вы также можете разместить как контент, так и логин, и добавили четкое право на контент, но я думаю, что это может быть вашим лучшим выбором. Не видя более широкой картины, трудно найти решение, которое определенно сработает в вашем случае. <Ч /> РЕДАКТИРОВАТЬ: Это похоже на работу: 

#content, #login {
  float:right;
  clear:right
}

<ч /> Больше мыслей: абсолютное позиционирование не будет работать (или не будет работать хорошо), если вы хотите, чтобы столбцы располагались по центру. Кажется, что с плавающей точкой работает - если вы можете получить любые требования к типу границы между столбцами, чтобы справиться с решением с плавающей запятой, вам может быть лучше выбрать его. Опять же, если сайт должен быть выровнен, я думаю, что абсолютный метод будет очень хорошо работать для ваших нужд.

0 голосов
/ 25 сентября 2008

Улетает ... не идеально. Крис ответил кажется лучшим решением. 

#login {
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#content {
  clear: right;
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#menu {
  float: left;
  width: 400px;
  border: 1px solid #f00;
}
<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>
...