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

Question

У меня есть основной div обертки, который установлен на 100% ширины. Внутри этого я хотел бы иметь два div, один с фиксированной шириной, а другой, который заполняет остальное пространство. Как мне переместить второй div, чтобы заполнить остальное пространство. Спасибо за любую помощь.

Answer 1

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

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>
   

2. Использование CSS display свойство - которое можно использовать, чтобы div s действовал как 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>
   

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

Answer 2

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

Просто определите ширину первого 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

Обратите внимание, что flex-боксы не имеют обратной совместимости со старыми браузерами, но являются отличным вариантом для ориентации на современные браузеры (см. Также Caniuse и MDN ). Отличное всестороннее руководство по использованию flex box доступно на CSS Tricks .

Answer 3

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

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

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

Answer 4

Вы можете использовать CSS-сетку для достижения этой цели, это длинная версия для иллюстрации:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Или более традиционный метод с использованием float и margin.

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

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

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<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>

Answer 5

<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>

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

Answer 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 .

Answer 7

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