Как разместить div бок о бок

Ответ 1

Есть много способов сделать то, что вы просите:

• Использование CSS float свойство:

  <div style="width: 100%; overflow: hidden;">
      <div style="width: 600px; float: left;"> Left </div>
      <div style="margin-left: 620px;"> Right </div>
  </div>
  

• Использование CSS display property - которое можно использовать для создания div как a table:

  <div style="width: 100%; display: table;">
      <div style="display: table-row">
          <div style="width: 600px; display: table-cell;"> Left </div>
          <div style="display: table-cell;"> Right </div>
      </div>
  </div>
  

Есть больше методов, но эти два являются самыми популярными.

Ответ 2

В CSS3 введены гибкие поля (это также гибкая коробка), которые также могут достичь этого.

Просто определите ширину первого div, а затем дайте второе значение flex-grow 1, которое позволит ему заполнить оставшуюся ширину родительского элемента.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle demo

Обратите внимание, что флеш-боксы не поддерживают обратную совместимость со старыми браузерами, но это отличный вариант для ориентации на современные браузеры (см. также Caniuse и MDN). Подробное руководство по использованию гибких ящиков доступно на CSS-трюках.

Ответ 3

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

Не размещайте свои стили в реальной жизни, извлекайте их в таблицу стилей.

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

JSFiddle

Ответ 4

Я не очень разбираюсь в стратегиях разработки HTML и CSS, но если вы ищете что-то простое и которое автоматически будет соответствовать экрану (как и я), я считаю, что наиболее прямолинейное решение состоит в том, чтобы заставить divs вести себя как слова в параграфе. Попробуйте указать display: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Вам может потребоваться или не нужно указывать ширину DIV

Ответ 5

Дайте первому div поплавок слева и зафиксирован, а второй div - 100%. Это должно делать свое дело. Если вы хотите разместить предметы под ним, вам нужно четко: как на предмет, который вы хотите разместить ниже

Ответ 6

Если вы не привязываете IE6, тогда плавайте второй <div> и дайте ему поле, равное (или, может быть, немного больше), первую фиксированную ширину <div>.

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Маржа учитывает возможность того, что "остаток пространства" <div> может содержать больше контента, чем "фиксированная ширина" <div>.

Не указывать фиксированную ширину фона; если вам нужно увидеть их как разные "столбцы", используйте трюк Faux Columns.

Ответ 7

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Это будет совместимо с браузером. Без левого края вы столкнетесь с проблемами, когда контент будет работать до конца, если ваш контент длиннее вашей боковой панели.