CSS два div рядом друг с другом
Ответы 13
К сожалению, в общем случае решить эту задачу нетривиально. Проще всего было бы добавить свойство в стиле css "float: right;" к вашему 200px-div, однако это также приведет к тому, что ваш "main" -div будет фактически иметь полную ширину, и любой текст в нем будет плавать по краю 200px-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 плавать и ширина, чтобы решить эту проблему.
#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>На самом деле это правильный ответ, он краток и - в отличие от двух приведенных выше - полностью самодостаточен. Лучшие ответы на SO должны быть такими, IMO. +1
Уточните, почему слева должен быть float:left? В вашем комментарии к моему ответу говорится: «lft div требуется для охвата всей левой области», но float:left заставит его плотно обернуть содержимое.
Этот ответ не совсем правильный, и очень неприятно видеть, что за него так много голосов. Это создает очень нестабильный макет. Я бы посоветовал поместить два div в контейнер и использовать свойство display: inline-block, чтобы выровнять div, как предлагали некоторые другие ответы. Я никого не критикую, так как мы все здесь, чтобы помогать друг другу, поэтому, помимо придирчивости, спасибо M.N. за ваш вклад в это сообщество.
НО следует отметить, что встроенный блок не будет работать в более старых версиях IE ...
@Mussser Я согласен с вашим комментарием, но имейте в виду, что этот ответ пришел из 2009 года ... времени, когда то, что вы называете "старыми версиями Ie" (то есть IE8 и ниже), было "текущими" версиями IE ...
@Bartdude truuuuu, должно быть, я не обращал такого пристального внимания на даты. Ты прав
Я что-то упустил? Добавление float: left; в div2 нарушает макет: jsfiddle.net/2fmwmrh3. Удалите его, и он отлично работает. Боковое примечание: div2 не может быть слева от себя, как предполагает этот ответ.
Просто используйте 2 пролета. Простой.
Перефразируя один из моих веб-сайтов, который делает нечто подобное:
<!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>
Не я, но я бы предположил, что хаки CSS, переходный тип документа или отсутствие объяснения?
По крайней мере, у него был doctype :) Я предполагаю, что людям не нравятся хаки браузера для полей в IE. По крайней мере, я это тестировал ...
Это слишком взломано. Есть много решений, которые гораздо более лаконичны.
@JohnBell, возможно, это проблема времени - это было разумное решение в то время (более 8 лет назад), но с тех пор браузерные технологии пошли дальше. Как ни странно, некоторые из других ответов, современников моего, которые предлагают ту же идею, набрали больше очков (например, Дэвид, через две минуты после моего)
Метод, предложенный @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>
Продемонстрировано:
left rightРедактировать: Хм, интересно. В окне предварительного просмотра отображаются правильно отформатированные блоки div, а в обработанном элементе сообщения - нет. Извините, вам придется попробовать это на себе.
Как все уже отмечали, вы сделаете это, установив float:right; для содержимого RHS и отрицательный запас на LHS.
Однако ... если вы не используете float: left; на LHS (как это делает Mohit), то вы получите эффект пошагового выполнения, потому что div LHS по-прежнему будет занимать пространство полей в макете.
Однако ... поплавок LHS будет сжимать содержимое, поэтому вам нужно будет вставить дочерний узел определенной ширины, если это неприемлемо, и в этот момент вы также можете определить ширину для родительского элемента.
Однако ... как указывает Дэвид, вы можете изменить порядок чтения разметки, чтобы избежать требования LHS с плавающей запятой, но это имеет проблемы с удобочитаемостью и, возможно, с доступностью.
Однако .. эта проблема может быть решено с поплавками с некоторой дополнительной разметкой
(предостережение: я не одобряю div .clearing в этом примере, подробности см. в здесь)
Учитывая все обстоятельства, я думаю, что большинство из нас хотели бы иметь нежадную ширину: оставаясь в CSS3 ...
div1 {
float: right;
}
div2 {
float: left;
}
Это будет работать нормально, если вы установите clear: both для элемента, который разделяет эти два блока столбцов.
При использовании поплавков необходимо установить свойство ширины. Так что я не думаю, что это хорошее решение ..
Я не знаю, актуальна ли эта проблема или нет, но я столкнулся с той же проблемой и использовал тег CSS display: inline-block;.
Оберните их в div, чтобы их можно было расположить соответствующим образом.
<div>
<div style = "display: inline-block;">Content1</div>
<div style = "display: inline-block;">Content2</div>
</div>
Обратите внимание, что использование встроенного атрибута стиля использовалось только для краткости этого примера, конечно, они использовались для перемещения во внешний файл CSS.
Это было для меня решением. Я хотел два смежных блока типа [] [] (чувак, я давно не делал этого ..) =) Престижность.
Этот тоже у меня сработал. У меня были проблемы с другим float: right'd div, подталкивающим мой div в правом столбце вниз под левым, поэтому я также заставил контейнер использовать display: inline-block, и это «решило».
Это не работает, если содержимое в Content1 DIV велико. В результате DIV находятся на двух отдельных строках, а не бок о бок.
@RichardHollis Мне удалось установить свойство width всех моих двух div рядом друг с другом, чтобы предотвратить перенос второго на новую строку.
Это лучше, чем float, если вы не хотите указывать ширину для внутренних div.
добавить css vertical-align: top; к обоим также, иначе они будут толкать друг друга, если длина содержимого отличается
Это работает в простых случаях, но плохо работает в сложных случаях. Я пришел сюда, потому что если вы вложите div вместо текста «content1», тогда браузеры запутаются в том, где «начинается» строка, и все сломается. Если вы поместите хотя бы одну букву содержимого в самый внешний встроенный блок div ... он отлично работает. Встроенный блок AFAICS не заслуживает доверия (осень 2014 г.)
@Adam: inline-block полностью заслуживает доверия, но есть некоторые проблемы, о которых вам нужно знать, чтобы исправить их прямо сейчас; Основная проблема - это символ «возврата каретки», который отображается как пробел между блоками, но есть несколько простых способов исправить это. Конечно, есть сложные случаи, но float далеко не прост в сложных случаях и легко может сломаться.
@Bartdude, как исправить проблему с "возвратом каретки"?
@gaitat cfr эта статья, содержащий все возможные исправления. Один "комментарий", безусловно, мой любимый, а остальные я использую только тогда, когда он не подходит (единственный пример, который я могу придумать, это CMS - Sharepoint, чтобы не называть его - удаление комментариев)
Это работает, но в случае более длинного текста мне пришлось установить максимальную ширину элементов.
просто используйте z-index, и все будет хорошо. убедитесь, что позиции отмечены как фиксированные или абсолютные. тогда ничего не будет перемещаться, как с тегом с плавающей запятой.
Я столкнулся с той же проблемой, и версия Mohits работает. Если вы хотите сохранить порядок левого и правого в 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;
}
Хитрость заключается в том, чтобы использовать правое заполнение в основном поле, но использовать это пространство снова, снова поместив правое поле с помощью margin-right.
У меня это не работает без поплавка: прямо в .right.
Это не будет ответом для всех, поскольку он не поддерживается в 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;
}
Я столкнулся с этой проблемой сегодня. Основываясь на приведенных выше решениях, это сработало для меня:
<div style = "width:100%;">
<div style = "float:left;">Content left div</div>
<div style = "float:right;">Content right div</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 для позиционирования 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;, чтобы очистить позицию.
Таблицы - гораздо более предсказуемое решение, чем постоянно меняющийся «float», который, кажется, всегда что-то портит, когда вы добавляете или удаляете элементы.
Это прекрасное решение, если вы работаете с электронной почтой.
Я использую смесь float и overflow-x: hidden. Минимальный код, всегда работает.
https://jsfiddle.net/9934sc4d/4/ - ПЛЮС вам не нужно очищать поплавок!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
Полезно, когда вы знаете высоту div и знаете, что содержимое не длиннее этой высоты. Однако, когда содержимого больше, чем высота div, он скрывается из-за переполнения ...
Это действительно лучше :)
Хороший! Приятно видеть людей, поддерживающих полезные и положительные отзывы, а не неконструктивные отрицательные. Хороший человек @Martijn
Спасибо тебе за это. Большую часть работы с пользовательским интерфейсом я выполняю в React Native, и flex box там работает намного лучше, чем в HTML + CSS (на мой взгляд). Это сделало мою жизнь намного проще.
'float: left' будет более подходящим, lft div требуется для охвата всей левой области. Никаких обид, просто подумайте.