CSS два діви поруч

Я хочу поставити два <div>s один біля одного. Справа <div>- близько 200 пікселів; а ліва <div>повинна заповнити решту ширини екрана? Як я можу це зробити?

Ви можете використовувати флексбокс для викладки своїх елементів:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Це в основному просто вискоблювання поверхні флексбоксу. Flexbox може робити дуже дивовижні речі.

Для старшої підтримки браузера ви можете використовувати властивості CSS float та ширини для її вирішення.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

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

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Зауважте, що використання атрибуту стилю вбудованого типу використовувалося лише для стислість цього прикладу, звичайно, що вони використовуються для переміщення у зовнішній файл CSS.

На жаль, це не тривіальна річ для загальної справи. Найпростіше було б додати властивість у стилі css "float: right;" до вашого розпізнавача 200px, однак, це також призведе до того, що ваш "головний" -div насправді буде на повну ширину, і будь-який текст там буде плавати навколо краю 200px-div, який часто виглядає дивним, залежно від вмісту (досить багато у всіх випадках, за винятком випадків, коли це плаваюче зображення).

EDIT: Як запропонував Дом, проблему обгортання, звичайно, можна було б вирішити з запасом. Дурний мене.

Метод, запропонований @roe та @MohitNanda, працює, але якщо правильний div встановлений як float:right;, то він повинен бути першим у джерелі HTML. Це порушує порядок читання зліва направо, що може бути заплутаним, якщо сторінка відображатиметься із вимкненими стилями. Якщо це так, можливо, краще використовувати обгортковий розділ і абсолютне позиціонування:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Продемонстровано:

Правка: Хм, цікаво. У вікні попереднього перегляду відображаються правильно відформатовані знаки, але викладений пост не відповідає. Вибачте, вам доведеться спробувати це на собі.

Я сьогодні зіткнувся з цією проблемою. Виходячи з вищезазначених рішень, для мене це спрацювало:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Просто змусіть батьківський діл перейти на повну ширину і промальовувати діви, що містяться всередині.

ОНОВЛЕННЯ

Якщо вам потрібно розмістити елементи в ряд, ви можете використовувати макет Flex . Тут у вас є ще один підручник з Flex . Це чудовий інструмент CSS, і хоча він не на 100% сумісний, його підтримка з кожним днем стає все кращою. Це працює так само просто, як:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

І ось що ви отримуєте тут - це контейнер із загальним розміром 4 одиниці, який розділяє простір зі своїми дітьми у співвідношенні 1/4 та 3/4.

Я зробив приклад у CodePen, який вирішує вашу проблему. Я сподіваюся, що це допомагає.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

ДУЖЕ СТАРИЙ

Можливо, це просто дурниця, але ви спробували зі столом? Він не використовує безпосередньо CSS для позиціонування дівок, але працює чудово.

Ви можете створити таблицю 1x2 і помістити свою divsвнутрішню частину, а потім відформатувати таблицю за допомогою CSS, щоб розмістити їх так, як вам потрібно:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Примітка

Якщо ви хочете , щоб уникнути з допомогою таблиці, як було сказано раніше, ви можете використовувати float: left;і float: right;і в наступний елемент, не забудьте додати clear: left;, clear: right;або clear: both;для того , щоб мати місце очищено.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Це буде добре, поки ви встановите clear: bothдля елемента, який розділяє цей два колонки.

Я зіткнувся з тією ж проблемою, і версія Mohits працює. Якщо ви хочете зберегти ліво-правий порядок у HTML, просто спробуйте це. У моєму випадку лівий розділ регулює розмір, правий - на ширині 260 пікселів.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Трюк полягає у використанні правої підкладки на основній коробці, але використовувати цей простір знову, розмістивши правий ящик знову з правою межею.

Я використовую суміш float і overflow-x: hidden. Мінімальний код, завжди працює.

https://jsfiddle.net/9934sc4d/4/ - ПЛЮС не потрібно очищати свій поплавок!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Як усі зазначали, ви зробите це, встановивши а float:right; на вміст RHS та від'ємну маржу на LHS.

Однак .. якщо ви не використовуєте float: left; LHS (як це робить Mohit), тоді ви отримаєте ступінчастий ефект, тому що LHS div все ще буде споживати маржинальний простір у макеті.

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

Однак .. як зазначає Девід, ви можете змінити порядок читання розмітки, щоб уникнути вимоги LHS float, але це має читабельність та, можливо, проблеми з доступністю.

Однак .. цю проблему можна вирішити за допомогою поплавків, надавши додаткову розмітку

(застереження: Я не схвалюю .clearing div у цьому прикладі, дивіться тут деталі)

Зважаючи на все, я думаю, що більшість із нас бажає, щоб не було жадної ширини: залишаючись у CSS3 ...

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

У цій статті показаний приклад: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Ось як виглядатиме ваш таблиця стилів:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Перефразовуючи один із моїх веб-сайтів, який робить щось подібне:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

просто використовуйте z-індекс і все буде сидіти добре. переконайтеся, що позиції позначені як фіксовані або абсолютні. тоді нічого не буде рухатися навколо, як з тегом float.