Блог

Главная - Вопросы по программированию - как разместить два divs рядом друг с другом

как разместить два divs рядом друг с другом

#html

#HTML

Вопрос:

На веб-странице у меня есть два раздела. Я хотел бы разместить второй div точно рядом с другим, чтобы они были в строке.

Ответ №1:

Вы можете использовать float стиль CSS. Установите для первого div значение left . Второй div будет размещен справа от него (при условии, что там достаточно места)

 <div>
  <div style="float: left">
     <p> This div will be on the left</p>
  </div>
  <div >
     <p> This div will be on the right</p>
  </div>
  <!-- optionally, you may need to add a "clearance" element below the floating divs -->
  <div style="clear: both" ></div>
</div>

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

 <div>
  <div style="width: 100px; float: left">
     <p> 100px div will be on the left</p>
  </div>
  <div style="width: 200px">
     <p> 200px div will be on the right as long as there is enough 
         horizontal space in the container div
     </p>
  </div>
  <!-- optionally, you may need to add a "clearance" element below the floating divs -->
  <div style="clear: both" ></div>
</div>

Ответ №2:

 <div>
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="clear:both;"><!-- usually leave this empty --></div>
</div>

Вы также можете использовать float:right; для выравнивания разделов с правой стороны страницы. Очень ВАЖНА четкость. В IE правило float left / right часто распространяется на другие элементы, на элементы, которые вы не собирались размещать. Однако обычно; вы не понимаете этого сразу, и выяснение, почему ваша страница выглядит дерьмово в будущем, становится кошмаром. Поэтому просто заведите привычку помещать пустой прозрачный div в качестве последнего родственного элемента любых divs, которые вы решите разместить.

Ответ №3:

Самый простой способ — CSS float:

 <div id="div1">hello</div>
<div id="div2">world</div>

И CSS:

 #div1 {float: left;}
#div2 {float: left; margin-left: 10px;}

Простой тестовый пример.

После плавающих разделов добавьте еще один, чтобы очистить поле с плавающей точкой, чтобы дальнейшее содержимое отображалось нормально:

 <div style="clear: both;"></div>

Ответ №4:

float это быстрый способ, inline-block это еще один быстрый способ и имеет некоторые преимущества перед float, такие как отсутствие необходимости в clear:both элементе.

вот пример с обоими методами http://jsfiddle.net/dGKHp /

HTML:

 <div id="floatExample">
    <div>Float Left</div>
    <div>Float Right</div>
    <br />
</div>

<div id="inlineBlockExample">
    <div>Left</div><div>Right</div>
</div>

CSS:

 #container {width:600px;margin:0 auto;}

#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}

#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}

Это довольно хороший обзор всех тонкостей inline-block : http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks /