CSS два деления рядом друг с другом

Question

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

Answer 1

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

#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. Flexbox может делать довольно удивительные вещи.

---

Для поддержки старых браузеров вы можете использовать свойства CSS float и width для ее решения.

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

Answer 2

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

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

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

Answer 3

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

EDIT: Как предположил Dom, проблема обертывания, конечно, может быть решена с запасом. Глупый я.

Answer 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, а в отображаемом элементе публикации - нет. Извините, вам придется попробовать это самостоятельно.

Answer 5

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

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

Просто сделайте родительский div охватить всю ширину и поместите в него div.

Answer 6

UPDATE

Если вам нужно разместить элементы в ряд, вы можете использовать Flex Layout . Здесь у вас есть еще один 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 для позиционирования 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; чтобы очистить позицию.

Answer 7

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

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

Answer 8

Я столкнулся с той же проблемой, и версия Mohits работает. Если вы хотите сохранить свой левый-правый порядок в HTML, просто попробуйте это. В моем случае левый div регулирует размер, правый div остается на ширине 260px.

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

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

Answer 9

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

https://jsfiddle.net/9934sc4d/4/ - ПЛЮС вам не нужно очищать поплавок!

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

Answer 10

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