CSS два деления рядом друг с другом - PullRequest
211 голосов
/ 15 января 2009

Я хочу поставить два <div> рядом друг с другом. Право <div> составляет около 200 пикселей; а левый <div> должен заполнить остальную часть ширины экрана? Как я могу это сделать?

Ответы [ 13 ]

2 голосов
/ 15 января 2009

Как все отмечали, вы сделаете это, установив float:right; для содержания RHS и отрицательное поле для LHS.

Однако ... если вы не используете float: left; на LHS (как это делает Mohit), то вы получите шаговый эффект, потому что div LHS по-прежнему будет занимать пространство на полях в макете.

Однако ... с плавающей запятой LHS содержимое будет сжато, поэтому вам нужно будет вставить дочерний узел определенной ширины, если это неприемлемо, и в этот момент вы также можете определить ширину родительского элемента.

Однако ... как указывает Дэвид, вы можете изменить порядок чтения разметки, чтобы избежать требования плавания LHS, но это имеет проблемы с читабельностью и, возможно, с доступностью.

Однако .. эту проблему можно решить с помощью поплавков с некоторой дополнительной разметкой

(предостережение: я не одобряю .clearing div в этом примере, подробности см. здесь )

Учитывая все обстоятельства, я думаю, что большинству из нас хотелось бы иметь не жадную ширину: оставаясь в CSS3 ...

0 голосов
/ 19 февраля 2011

просто используйте z-index и все будет хорошо. убедитесь, что позиции помечены как фиксированные или абсолютные. тогда ничто не будет перемещаться, как с тегом float.

0 голосов
/ 15 января 2009

Перефразируя один из моих сайтов, который делает что-то похожее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...