Я хочу поставить две <div>
с рядом. Право <div>
составляет около 200 пикселей; а левая <div>
должна заполнить остальную часть ширины экрана? Как я могу это сделать?
230
Вы можете использовать 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>
float:left
? В вашем комментарии к моему ответу говорится, что «lft div требуется для охвата всей левой области», ноfloat:left
это заставит его плотно обернуть содержимое.Я не знаю, является ли это все еще текущей проблемой или нет, но я только столкнулся с той же самой проблемой и использовал
display: inline-block;
тэг CSS . Оберните их в div, чтобы они могли быть расположены соответствующим образом.Обратите внимание, что использование атрибута inline style использовалось только для краткости этого примера, конечно, они использовались для перемещения во внешний файл CSS.
источник
width
свойство всех моих двух делителей рядом друг с другом, чтобы предотвратить перенос второго на новую строку.К сожалению, это не тривиальная вещь для решения в общем случае. Проще всего было бы добавить свойство в стиле css "float: right;" к вашему 200px div, однако, это также приведет к тому, что ваш "main" -div будет на всю ширину, и любой текст там будет плавать вокруг края 200px-div, что часто выглядит странно, в зависимости от содержимого (в значительной степени во всех случаях, кроме случаев, когда это плавающее изображение).
РЕДАКТИРОВАТЬ: Как предложил Dom, проблема обертывания, конечно, может быть решена с запасом. Я такой глупый.
источник
Метод, предложенный @roe и @MohitNanda, работает, но если задан правильный div
float:right;
, то он должен стоять первым в источнике HTML. Это нарушает порядок чтения слева направо, что может привести к путанице, если страница отображается с выключенными стилями. Если это так, то может быть лучше использовать оболочку div и абсолютное позиционирование:Продемонстрировано:
лево правоРедактировать: Хм, интересно. В окне предварительного просмотра отображаются правильно отформатированные элементы div, а в отображаемом элементе публикации - нет. Извините, вам придется попробовать это самостоятельно.
источник
Я столкнулся с этой проблемой сегодня. Исходя из приведенных выше решений, это сработало для меня:
Просто сделайте, чтобы родительский div охватывал всю ширину и плавал в div, содержащихся внутри.
источник
ОБНОВИТЬ
Если вам нужно разместить элементы в ряд, вы можете использовать Flex Layout . Здесь у вас есть еще один учебник Flex . Это отличный инструмент CSS, и хотя он не на 100% совместим, с каждым днем его поддержка улучшается. Это работает так же просто, как:
HTML
CSS
И здесь вы получите контейнер с общим размером 4 единицы, который делит пространство со своими дочерними элементами в соотношении 1/4 и 3/4.
Я сделал пример в CodePen, который решает вашу проблему. Я надеюсь, что это помогает.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
ОЧЕНЬ СТАРЫЙ
Может быть, это просто чепуха, но вы пробовали с таблицей? Он не использует непосредственно CSS для позиционирования div, но он работает нормально.
Вы можете создать таблицу 1x2 и поместить ее
divs
внутрь, а затем отформатировать таблицу с помощью CSS, чтобы разместить их так, как вы хотите:Заметка
Если вы хотите , чтобы избежать с помощью таблицы, как было сказано ранее, вы можете использовать
float: left;
иfloat: right;
и в следующий элемент, не забудьте добавитьclear: left;
,clear: right;
илиclear: both;
для того , чтобы иметь место очищено.источник
Это будет работать нормально, если вы установите
clear: both
элемент, который разделяет этот блок из двух столбцов.источник
Я столкнулся с той же проблемой, и версия Mohits работает. Если вы хотите сохранить свой левый-правый порядок в HTML, просто попробуйте это. В моем случае левый div регулирует размер, правый div остается на ширине 260px.
HTML
CSS
Хитрость заключается в том, чтобы использовать правый отступ на главном блоке, но снова использовать это пространство, снова поместив правый блок с полем справа.
источник
Я использую смесь float и overflow-x: hidden. Минимальный код, всегда работает.
https://jsfiddle.net/9934sc4d/4/ - ПЛЮС вам не нужно очищать ваш поплавок!
источник
Как все отметили, вы сделаете это, установив для
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/
Вот как будет выглядеть ваша таблица стилей:
источник
Перефразируя один из моих сайтов, который делает нечто подобное:
источник
просто используйте z-index и все будет хорошо. убедитесь, что позиции помечены как фиксированные или абсолютные. тогда ничто не будет двигаться, как с тегом float.
источник