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

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

Вы можете использовать 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>

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

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

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

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

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

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

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

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

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

ОБНОВИТЬ

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

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

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

Я столкнулся с той же проблемой, и версия 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;
}

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

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

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

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

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

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

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

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

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

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

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

Это не будет ответом для всех, так как он не поддерживается в 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;
 }

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

<!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-index и все будет хорошо. убедитесь, что позиции помечены как фиксированные или абсолютные. тогда ничто не будет двигаться, как с тегом float.