CSS два divs рядом друг с другом

Я хочу поставить два <div> рядом друг с другом. Правило <div> составляет около 200 пикселей; а левая <div> должна заполнить остальную ширину экрана? Как я могу это сделать?

Ответ 1

Вы можете использовать flexbox для размещения своих элементов:

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

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

Ответ 2

Я не знаю, была ли эта проблема актуальной или нет, но я столкнулся с одной и той же проблемой и использовал тег CSS display: inline-block;. Обертывание их в div, чтобы они могли быть расположены соответствующим образом.

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

Обратите внимание, что использование атрибута inline style использовалось только для краткости этого примера, конечно, эти используемые были перемещены во внешний файл CSS.

Ответ 3

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

РЕДАКТИРОВАТЬ: Как было предложено Dom, проблема обертывания, конечно, может быть решена с запасом. Глупый я.

Ответ 4

Метод, предложенный @roe и @MohitNanda, работает, но если правый div установлен как float:right;, он должен быть первым в источнике HTML. Это нарушает порядок чтения слева направо, что может сбить с толку, если страница отображается со стилями, отключенными. В этом случае было бы лучше использовать обертку div и абсолютное позиционирование:

<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, но обработанный элемент сообщения не работает. Извините, вам придется попробовать это для себя.

Ответ 5

Сегодня я столкнулся с этой проблемой. Основываясь на вышеизложенных решениях, это сработало для меня:

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

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

Ответ 6

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

Это будет работать нормально, пока вы установите clear: both для элемента, который разделяет этот два блока столбца.

Ответ 7

UPDATE

Если вам нужно разместить элементы в строке, вы можете использовать Flex Layout. Здесь вы найдете еще один руководство по Flex. Это отличный инструмент для CSS, и хотя он не совместим со 100%, каждый день его поддержка

CSS

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

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

И вы получаете здесь контейнер с общим размером 4 единицы, которые разделяют пространство со своими дочерними элементами в соотношении 1/4 и 3/4.

Я сделал пример в CodePen, который решает вашу проблему. Надеюсь, это поможет.

ОЧЕНЬ СТАРЫЙ

Может, это просто вздор, но вы пробовали со столом? Он не использует непосредственно CSS для позиционирования div, но он отлично работает.

Вы можете создать таблицу 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; чтобы очистить позицию.

Ответ 8

Я столкнулся с той же проблемой, и версия Мохита работает. Если вы хотите сохранить свой левый порядок в html, попробуйте это. В моем случае левый div настраивает размер, правый div остается на ширине 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;
}

Трюк состоит в том, чтобы использовать правое заполнение в главном окне, но снова использовать это пространство, снова разместив правое поле с правым краем.

Ответ 9

Как все отметили, вы сделаете это, установив float:right; в контент RHS и отрицательный запас на LHS.

Однако.. если вы не используете float: left; в LHS (как это делает Mohit), вы получите эффект степпинга, потому что LHS div по-прежнему будет потреблять пространство margin'd в макете.

Однако плагин LHS сократит содержимое содержимого, поэтому вам нужно будет вставить определенный дочерний номер ширины, если это неприемлемо, и в этот момент вы также можете определить ширину родительского элемента.

Однако, как указывает Дэвид, вы можете изменить порядок считывания разметки, чтобы избежать требования по плаванию LHS, но это имеет читаемость и, возможно, проблемы доступности.

Однако.. эта проблема может быть решена с поплавками с некоторой дополнительной разметкой

(caveat: я не одобряю .clearing div в этом примере, см. here)

Учитывая все обстоятельства, я думаю, что большинство из нас желает, чтобы была неглавная ширина: оставаясь в CSS3...

Ответ 10

Это не будет ответом для всех, поскольку он не поддерживается в IE7-, но вы можете его использовать, а затем использовать альтернативный ответ для IE7. Это display: table, display: table-row и display: table-cell. Обратите внимание, что это не использование таблиц для макета, а стиль divs, так что вещи выстраиваются красиво, без всяких хлопот сверху. 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;
 }

Ответ 11

Я использую смесь float и overflow-x: hidden. Минимальный код всегда работает.

https://jsfiddle.net/9934sc4d/4/ - PLUS вам не нужно очищать свой float!

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

Ответ 12

Перефразируя один из моих сайтов, который делает что-то подобное:

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

Ответ 13

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