Як розташувати діви поруч

У мене є головна оболонка, яка встановлюється на 100% шириною. Всередині я хотів би мати два діви, один, який має фіксовану ширину, а другий, який заповнює решту місця. Як я плаваю другим дівом, щоб заповнити решту місця. Дякуємо за будь-яку допомогу.

Є багато способів зробити те, що ви просите:

1. Використання властивості CSSfloat :

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

2. Використання властивості CSSdisplay - яке можна використовувати для того, щоб divs діяти як 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>

Існує більше методів, але ці два є найпопулярнішими.

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

Просто визначте ширину першого діла, а потім надайте другому 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

Зауважте, що флекс-коробки не сумісні із старими браузерами, але це чудовий варіант для орієнтації на сучасні веб-переглядачі (див. Також Канюза та MDN ). Чудовий вичерпний посібник із використання гнучких коробок доступний на CSS Tricks .

Я мало знаю про стратегії дизайну HTML та CSS, але якщо ви шукаєте щось просте, яке автоматично підходитиме до екрана (як і я), я вважаю, що найпростішим рішенням вперед є змусити діви вести себе як слова в абзац. Спробуйте вказатиdisplay: inline-block

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

Можливо, вам не знадобиться вказувати ширину DIVs

Для цього можна скористатися сіткою 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>

Дайте першому діву поплавок ліворуч і зафіксуйте, другий дів на 100% шириною поплавок залишився. Це повинно зробити трюк. Якщо ви хочете розмістити предмети під ним, вам потрібно чітко: як на предметі, який ви хочете розмістити внизу

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

Це буде сумісний між веб-браузером. Без поля зліва ви зіштовхнетесь із проблемами із вмістом, який працює повністю ліворуч, якщо вміст довший за бічну панель.

Якщо ви не націлюєте на 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 Column .