Каков наилучший способ разместить div в css? - PullRequest
Новая
       13

Каков наилучший способ разместить div в css?

1 голос
/ 14 сентября 2008

Я пытаюсь разместить это меню: 

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

В левой части страницы. Проблема в том, что если я использую абсолютные или фиксированные значения.
Различные размеры экрана по-разному отображают панель навигации. У меня также есть второй элемент div, который содержит весь основной контент, который также необходимо переместить вправо, поэтому пока я использую относительные значения, которые работают независимо от размера экрана.

Ответы [ 5 ]

5 голосов
/ 14 сентября 2008

float действительно правильное свойство для достижения этой цели. Однако пример, данный bmatthews68, может быть улучшен. Самое важное в плавающих полях - то, что они должны указывать явную ширину. Это может быть довольно неудобно, но так работает CSS. Однако обратите внимание, что px - это единица измерения, которой нет места в мире HTML / CSS, по крайней мере, чтобы не указывать ширину.

Всегда прибегайте к мерам, которые будут работать с различными размерами шрифта, т. Е. Используйте em или %. Теперь, если меню реализовано в виде плавающего тела, то это означает, что основной контент «плавает» вокруг него. Если основной контент выше, чем меню, это может быть не то, что вы хотите:

float1 http://page.mi.fu -berlin.de / krudolph / stuff / float1.png 

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

Вы можете исправить это поведение, задав основному содержанию значение margin-left, равное ширине меню:

float2 http://page.mi.fu -berlin.de / krudolph / stuff / float2.png 

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

В большинстве случаев вы также хотите присвоить основному контенту padding-left, чтобы он не «прилипал» к меню слишком близко.

Кстати, тривиально изменить вышеприведенное так, чтобы меню находилось справа, а не слева: просто меняйте каждое вхождение слова «влево» на «вправо».

Ах, последнее. Если содержимое меню выше основного, оно будет отображаться странно, потому что float делает некоторые странные вещи. В этом случае вам придется очистить поле, которое находится под плавающим телом, как в примере с bmatthews68.

/ EDIT: Черт, HTML не работает так, как показывал предварительный просмотр. Ну, вместо этого я включил картинки.

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

Я думаю, вы должны использовать свойство float для позиционирования подобных вещей. Вы можете прочитать об этом здесь.

2 голосов
/ 14 сентября 2008

Все ответы, говорящие об использовании чисел с плавающей точкой (с явной шириной), верны. Но чтобы ответить на оригинальный вопрос, как лучше всего расположить <div>? Это зависит.

CSS очень контекстуален, и поток страницы зависит от структуры вашего HTML. Нормальный поток - это то, как элементы и их дочерние элементы будут размещаться сверху вниз (для элементов блока) и слева направо (для встроенных элементов) внутри содержащего их блока (обычно родительского). Вот как должна работать большая часть вашего макета. Вы будете полагаться на width, margin и padding для определения расстояния и расположения элементов относительно других элементов вокруг него (будь то <div>, <ul>, <p> или иным образом На этом этапе HTML в основном семантический).

Использование таких стилей, как позиционирование float или absolute или relative, может помочь вам достичь очень конкретных целей вашего макета, но важно знать, как их использовать. Как было объяснено, float обычно используется для размещения элементов блока рядом друг с другом, и это действительно хорошо для многостолбцовых макетов.

Я не буду вдаваться в подробности, но вы можете проверить следующее:

0 голосов
/ 02 апреля 2013

вы можете использовать float 

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

в css файле 

.left-menu{float:left;width:200px;}
0 голосов
/ 14 сентября 2008

Вы должны использовать атрибуты float и clear CSS, чтобы получить желаемый эффект.

Сначала я определил стили для вызываемых влево и вправо для двух столбцов в моем макете и стиль под названием clearer, используемый для сброса потока страниц. 

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Затем я использую их для разметки своей страницы. 

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />
...