Как лучше всего разместить div в CSS?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

Вопрос

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

<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, содержащий весь основной контент, который также необходимо переместить вправо. Пока я использую относительные значения, которые, кажется, работают независимо от размера экрана.

Это было полезно?

Решение

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 поэтому он не «прилипает» к меню слишком тесно.

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

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

/РЕДАКТИРОВАТЬ:Блин, HTML не работает так, как показывал предварительный просмотр.Ну, вместо этого я включил фотографии.

Другие советы

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

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

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

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

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

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

Сначала я определил стили для вызываемых левого и правого столбцов в моем макете, а также стиль под названием «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" />

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

<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;}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top