Я хочу разместить два <div>`` рядом друг с другом. Правый
занимает около 200px; а левый
Вы можете использовать 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 может делать довольно удивительные вещи.
Для поддержки старых браузеров, вы можете использовать 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>
Я не'т знаю, если это еще актуальный вопрос или нет, но я просто столкнулся с той же проблемой и используют в CSS дисплей: встроенный блок; тег. Оборачивая это в div, так что они могут быть правильно позиционирована.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Обратите внимание, что использование атрибута встроенный стиль применяется только для данного примера лаконичность конечно это быть перемещены на внешний CSS-файл.
К сожалению, в общем случае это не так просто решить. Проще всего было бы добавить свойство css-стиля "float: right" к вашему 200px div, однако это также приведет к тому, что ваш "main"-div будет иметь полную ширину, и любой текст в нем будет плавать по краю 200px-div, что часто выглядит странно, в зависимости от содержимого (практически во всех случаях, кроме плавающего изображения).
EDIT: Как предложил Dom, проблема обертывания, конечно, может быть решена с помощью отступов. Глупый я.
Метод, предложенный @икра и @работа MohitNanda, но если правый див имеет значение поплавок:справа;
, то это должно прийти в исходный HTML-код. Это нарушает слева-направо читать, что может быть проще, если отображается страница со стилями выключен. Если это's в случае, это может быть лучше использовать обертку 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>
Показали:
<див ИД=на"обернуть" в стиле=на"Положение:относительная; и"> <див ИД=на"оставили" стиль=то"маржи-право:201px;границы:1 пиксель горит красным; и">слева</дел> <див ИД=и"Право и" Стиль"и позицию:абсолютная;ширина:200 пикселей;справа:0;топ:0;границы:1px твердых черный; и">право</дел> </див>
Редактировать: Хм, интересно. Окно предварительного просмотра показывает правильный формат ДИВС, Но предоставленные записи не. Тогда, извините, вы'll должны попробовать его для себя.
Я сегодня столкнулся с этой проблемой. На основании вышеуказанного решения, этот работал для меня:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
Просто сделать Родительский промежуток див на всю ширину и float в ДИВС внутри.
Обновление
Если вам нужно расположить элементы в строке, вы можете использовать макетов Flex. Вот вам и еще один Флекс tutorial. Это'ы большой инструмент для CSS и хотя это не 100% совместимы, каждый день его поддержка становится лучше. Это работает как простой, как:
HTML-код
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
УСБ
.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 и положить внутрь Уралочка
, а затем форматирование таблицы с помощью CSS, чтобы поместить их, как вы хотите:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Внимание
Если вы хотите избежать, используя таблицу, как было сказано ранее, вы можете использовать плавать: слева; " и " поплавок: справа; и в следующий элемент, Дон'т забудьте добавить
ясный: слева;,
ясно: справа; или ясное: оба;` для того чтобы иметь позицию чистить.
div1 {
float: right;
}
div2 {
float: left;
}
Это будет работать ОК, как долго, как вы установите и
для элемента, который отделяет эти два блока колонки.
Я столкнулся с той же проблемой и Mohits версия работает. Если вы хотите держать свой левый-правый порядок в HTML, просто попробуйте это. В моем случае, левая div является изменение размера, правый див остается на ширине 260px.
В формате HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
УСБ
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
Хитрость заключается в том, чтобы использовать правильные отступы в главном окне, но снова использовать это пространство, поместив снова в правое поле правое поле.
Это выиграл'т быть ответом для каждого, так как он не поддерживается в IE7-, но вы можете использовать его, а затем использовать альтернативный ответ для IE7-. Это дисплеем: настольный, дисплей: таблицы-строки и отображать: таблица-ячейки. Обратите внимание, что это не использовать таблицы для верстки, но для укладки ДИВС так, что все красиво выстраиваются с себя все хлопоты сверху. Мое приложение 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;
}
Как все заметили, вы'll делают это, устанавливая `поплавок:справа; по материалам РГО и отрицательная маржа на ЛХС.
Однако.. если вы Don'т использовать поплавок: слева; на млг (как Мохит делает) затем вы'll получить шагового эффекта, потому что ЛХС div является по-прежнему будут потреблять маржа'd пространство в макете.
Однако.. затем поплавок термоусадочную пленку контент, так что вы'll необходимо, чтобы вставить определенную ширину childnode если это's не приемлемо, в какой момент можно также определить ширину родителя.
Однако.. как Давид указывает, можно изменить читать-порядок разметки, чтобы избежать ЛХС требования поплавок, но это's имеет читаемость и, возможно, проблемы с доступностью.
Однако.. эта проблема может быть решена]1 с поплавками даны некоторые дополнительные разметки
(нюанс: я Дон'т одобряю .очистка div в этом примере, см. здесь для деталей)
Учитывая все обстоятельства, я думаю, большинство из нас хотел бы, чтобы был нежадный ширина:оставшиеся в CSS3...
Я использую смесь из поплавка и переполнение-х:скрытый. Минимальный код, всегда работает.
- плюс вы Дон'т нужна, чтобы очистить ваш поплавок!.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
Перефразируя один из моих сайтов, который делает нечто подобное:
<!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>