Содержание

Строчно-блочные элементы | htmlbook.ru

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег <div>, как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float, которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.

В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block.

div {
 display: inline-block;
}

Характеристики этих элементов следующие.

  • Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  • Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align.
  • Разрешено задавать ширину и высоту.
  • Эффект схлопывания отступов не действует.

Чтобы создать галерею, представленную на рис. 3.28 для тега <div> следует задать значение display как inline-block, а внутрь него добавить изображение и подпись через тег <p> (пример 3.18).

Пример 3.18. Использование display

XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Галерея</title>
  <style type="text/css">
   .photo {
    background: #d9dabb; /* Цвет фона */
    width: 150px; /* Ширина */
    margin: 0 10px 10px 0; /* Отступы */
    padding: 10px 0; /* Поля сверху и снизу */
    text-align: center; /* Выравнивание по центру */
    display: inline-block; /* Строчно-блочный элемент */
   }
   .photo img {
    border: 2px solid #8b8e4b; /* Параметры рамки */
   }
   .photo p {
    margin: 0; /* Отступы */
   }
  </style>
 </head>
 <body>
  <div>
   <p><img src="images/thumb1.jpg" alt="" /></p>
   <p>Софийский собор</p>
  </div>
  <div>
   <p><img src="images/thumb2.jpg" alt="" /></p>
   <p>Польский костёл</p>
  </div>
  <div>
   <p><img src="images/thumb3.jpg" alt="" /></p>
   <p>Купеческий клуб</p>
  </div>
  <div>
   <p><img src="images/thumb4.jpg" alt="" /></p>
   <p>Памятник Св. Владимиру</p>
  </div>
 </body>
</html>

Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

Рис. 3.29. Разная высота секций

Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align, добавив это свойство к классу photo. Если указать значение top, то поменяется отображение секций (рис. 3.30).

Рис. 3.30. Выравнивание по верхнему краю

Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout. Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

Пример 3.19. Стиль для IE

<style type="text/css">
  /* Стиль из примера 3.18 */
</style>
<!--[if lte IE 7]>
 <style type="text/css">
  .photo { 
   display: inline; /* Строчный элемент */
   zoom: 1; /* Устанавливаем hasLayout */
  }
 </style>
<![endif]-->

Конструкция [if lte IE 7] означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom, оно нестандартное и предназначено для установки свойства hasLayout, напрямую которое задавать нельзя.

Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).

Пример 3.20. Каталог товаров

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Каталог</title>
  <style type="text/css">
   BODY { font: 10pt Arial, Helvetica, sans-serif; }
   #catalog A { color: #666; }
   #catalog A:hover { color: #1fa0e2; }
   #catalog DIV {
    width: 110px; /* Ширина */
    margin: 0 5px 15px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
    display: inline-block; /* Строчно-блочный элемент */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
   #catalog P { margin: 0 5px; }
   #catalog SPAN { color: #ccc; font-size: 0.8em; } 
  </style>
  <!--[if lte IE 7]>
  <style type="text/css">
   #catalog DIV { 
    display: inline; /* Строчный элемент */
    zoom: 1; /* Устанавливаем hasLayout */
   }
  </style>
  <![endif]-->
 </head>
 <body>
  <div>
   <div>
    <p><img src="images/category1.jpg" alt="" /></p>
    <p><a href="#">Видео</a> <span>1856</span></p>
   </div>
   <div>
    <p><img src="images/category2.jpg" alt="" /></p>
    <p><a href="#">Фото</a> <span>315</span></p>
   </div>
   <div>
    <p><img src="images/category3.jpg" alt="" /></p>
    <p><a href="#">Мобильные устройства</a> <span>2109</span></p>
   </div>
   <div>
    <p><img src="images/category4.jpg" alt="" /></p>
    <p><a href="#">Компьютеры и орг.техника</a> <span>4296</span></p>
   </div>
   <div>
    <p><img src="images/category5.jpg" alt="" /></p>
    <p><a href="#">Бытовая техника</a> <span>731</span></p>
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.31.

Рис. 3.31. Каталог товаров

Чтобы не задавать каждому тегу <div>, которых может быть довольно много, свой класс, в примере введён <div> с идентификатором catalog и стиль применяется к тегам внутри него.

Красивое выравнивание блоков по резиновой сетке — CSS-LIVE

Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью

text-align: center или justify соответственно?

Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!

Проблема

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

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

text-align: center. А так же воспользуемся маркированным списком.

<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
	<li>Пункт 4</li>
	<li>Пункт 5</li>
	<li>Пункт 6</li>
	<li>Пункт 7</li>
	<li>Пункт 8</li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: center;
}

	ul li {
		display : inline-block;
		width : 80px;
		height: 80px;
		margin-bottom: 10px;
		background: #E76D13;
		vertical-align: top;
		text-align: center;
		line-height: normal;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Ничего необычного в коде нет. Обычный список, всё те же старые добрые элементы строчно-блочного (display : inline-block) уровня. Самое пожалуй интересное, что стоит выделить, это text-align: center, благодаря которому и происходит наше горизонтальное выравнивание.
Пока пункты занимают единственную строку, всё выглядит так.

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

Вроде бы тоже неплохо, всё происходит так, как и должно происходить. Последняя строка так же, как и предыдущие — выравнивается по середине. Но, именно это выравнивание и создаёт нам проблему. Блоки находятся по середине, создавая по бокам много ненужного и пустого пространства. Если бы, например, в последней строке остался всего один блок, то этого бы пространства стало ещё больше, а сам блок болтался бы в середине, как изгой на пустыре.

А теперь, давайте взглянем, чтобы мы хотели получить.

Как видно из рисунка, два элемента в последней строке прижались к левому краю, не смотря на то, что строка по ширине явно больше, чем общая ширина её блоков. Это видно по правому, свободному пространству, которое составляет две трети наших элементов. Именно такое поведение блоков нам и нужно получить в итоге. Т.е. по сути сделать так, чтобы выравнивание элементов было красивым, строящимся ровно по сетке (даже по резиновой), не взирая на своё количество и лишнее пустое пространство в последней строке. Говоря другими словами, нам нужно каким либо образом повлиять на поведение последней строки, заставив её подчиняться нашим правилам.

Как это работает?

Перед тем, как перейти непосредственно к решению задачи, давайте для начала разберём алготитм работы таких свойств, как text-align: center и justify. Это поможет нам лучше понять, что происходит в нашей сетке, её поведение, и то, как выполняется работа этих свойств в последней строке.

text-align: center

Начнём пожалуй с text-align: center. В нем можно выделить три основных этапа.

Первый этап
В начале берётся строка. Высчитывается общая ширина слов или неразрывных блоков (inline-block, img, и т.д) в строке. Причём если между этими блоками есть фактические пробелы или же отступы, которые сделаны с помощью таких средств, как word-spacing и прочих, то эти расстояния так же добавляются к общей сумме ширины блоков.

Второй этап
На этом этапе всё ещё проще. Вычисляется оставшееся ширина строки, т.е. всё свободное пространство, которое не вошло в сумму общей ширины слов с их межсловным расстоянием.

Третий этап
Ну и в завершающем этапе происходит следующее. Самая первая в строке площадка с буквой сдвигается вправо ровно на половину результата, полученного после этапа номер два. Что даёт абсолютно равные отступы справа и слева самой строки.
Чтобы лучше понять, как всё происходит, я сделал специальный рисунок.

Перед нами рисунок, на котором изображён контейнер, с двумя строками, ширина которых составляет 500px.
Так же мы можем видеть, что сумма всех блоков в первой строке с их интервалами равна 370px. Значит на третьем этапе наш алгоритм вычел из первого второе (500-370), что дало результат 130. Далее, как я уже говорил, поделил эту сумму ровно на два раза (130/2) и отодвинул самый первый блок вправо, на полученный результат (65px). Таким образом наши блоки оказались точно по середине, с отступы по бокам стали абсолютно одинаковыми. Если бы в первой строке не хватило места, то самый крайний справа блок перешёл бы на второю строку и алгоритм снова включился бы в дело.

Тоже самое касается и второй строки. В ней алгоритм работает точно так же, мало того, можно увидеть, что боковые отступы в ней составляют дробное число (132.5px), так как text-align: center делит общую ширину блоков с их интервалами ровно на 2, как я и говорил.

В принципе ничего сложного, всё вполне понятно и логично. В нашей ситуации важно понять, что, если в последней строке остаётся один блок, то он выравнивается ровно по середине, за счёт высчитанного, свободного пространства справа. А это как раз то, что нам и нельзя допускать.

text-align: justify

Механизм text-align: justify, я уже описывал в одной из своих статей. Повторяться не имеет смысла, поэтому я вам, настоятельно рекомендую пройти по ссылке и внимательно перечитать там всё, что касается алгоритма и этапов работы text-align: justify.
Единственное, что я хочу упомянуть здесь, это то, что…

Последняя же строка не попадает в поле зрения justify, так как он работает только для целиком заполненных строк, а в последней строке пробелы всегда остаются своего обычного размера.

Да, именно так. text-align: justify в отличии от text-align: center вообще отказывается работать с последней строкой, и поэтому выравнивания по ширине в ней не происходит.
Так что это тоже входит в наши обязанности, а именно заставить неработающий алгоритм действовать, и в завершающей строчке.

Решение

Сразу забегу вперёд и скажу, что решение для обоих случаев абсолютно идентично, поэтому нет смысла разбирать каждое из них в отдельности. Так что давайте поразмыслим, что у нас есть на данный момент.
Значит, по сути, у нас есть два свойства text-align: justify и center, каждый из которых выравнивает строки по собственному алгоритму. А так же мы уже понимаем, что text-align: center работает с последней строкой, а вот text-align: justify — нет. Но зато мы точно знаем, что если строка, за которой идёт следующая (допустим последняя) будет полностью заполнена, то эти свойства будут выравнивать нашу сетку по нашим правилам. И даже при резиновой ширине контейнера такие заполненные строки будут вести себя так, как нам хотелось бы.

Какой же вывод можно из этого сделать? И как можно связать эти вещи с последней строкой, в которой может быть всего один блок? Ответ прост. Нам нужно придумать, как можно заполнить последнюю строку так, чтобы, оставшееся от общей ширины блоков пространство, было чем-то заполнено, и мало того, чтобы это «чем-то» могло переходить на следующую строку, для того, чтобы наши свойства работали безукоризненно.

Итак, для заполнения последней строки, мы будем использовать псевдоэлемент, сгенерированный при помощи :after. Это хороший вариант, так как он поможет решить нам нашу задачу и избавит от лишнего мусора в разметке. По умолчанию псевдоэлементы генерируют строчный блок, а значит именно то, что нам и нужно. Так как inline-block будет представлять из себя одну большую, неразрывную букву и не сможет разбиться на несколько «кирпичей», что не приведёт ни к чему путному. Ну, а block сразу же займёт отдельную строку, и так же, как и inline-block — не принесёт результатов. При этих значениях наша ситуация будет выглядеть примерно так.

ul:after {
	content: 'display: block, мало контента';
	display: block;
	background: #E76D13;
}

Как видно, из скриншота, вспомогательный блок сразу же занял новую строку, оставив прежнюю (последнюю по факту) подчиняться правилам алгоритма. Каких-то положительных результатов такими средствами добиться невозможно, как бы вы не пытались, так что отбрасываем эти вещи и переходим к настоящему решению…

Из всего вышесказанного можно понять одно, что в нашей ситуации нам может помочь элемент, именно строчного (inline) уровня, т.е. обычный display : inline + строка текста, с пробелами между слов.

ul:after {
	content: 'Обычный строковый элемент, обычный строковый элемент, обычный строковый элемент';
	background: #E76D13;
}

Да, очень похоже. Из скриншота ясно, строчный блок, мало того, что смог повлиять на последнюю строку, так ещё и перенёсся на следующую не полностью, оставив на предыдущей строчке неразрывное слово. По этому слову видно, что по своей ширине оно немного не дотягивает до ширины блоков (100px), а если бы дотягивало, то, возможно, у нас и вышло бы что-то путное.

В общем поэкспериментировав какое-то время с вышесказаннным, на свет родилось следующее решение.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: center;
	margin: 0px 0 10px;
}
	ul:after {
		content: ' i i i i i i i i ';
		word-spacing: 97px;
		padding-left: 97px;
		/* visibility: hidden; Скрыл это свойство, ради демонстрации процесса*/
	}
		ul li {

			display : inline-block;
			width : 100px;
			height: 100px;
			margin: 0px 0 20px;
			background: #E76D13;
			vertical-align: top;
			text-align: center;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

Здорово! Наша сетка выровнена так, как нам надо. Сразу же скажу, что такое выравнивание получается при любой ширине экрана, что не может не радовать. А теперь сама суть.

Значит у нас есть строка «i i i i i i i i»  , состоящая из букв и пробелов, но это не простые буковки и пробелы, как может показаться на первый взгляд. Во-первых сама буква i выбрана не случайно. Дело в том, что буква i сама по себе узкая, за счёт чего ей легко управлять и подгонять нужную ширину. Во-вторых сами пробелы состоят не только из символа пробела, но и из word-spacing, т.е. его значение плюсуется к пробелу, что в сумме даёт нужную нам ширину. Да, и конечно же, нужно учитывать, что связка «пробел + word-spacing» работает только тогда, когда в конце неё идёт другой символ, отличный от пробельного. Так как пробелы имеют свойство «схлопывания», то буквы i, идущие после word-spacing не дают им этого сделать.

Так что, по сути, мы имеем неразрывные псевдоблоки, в виде «буквы + padding-left» вначале псевдоэлемента, а далее в виде связки «пробел + word-spacing + буква», и так до конца строки. Ну, а на следующей строчке всё повторяется заново, только первый псевдоблок состоит теперь из одной буквы. Но эта строка нас уже не волнует, нас интересуют только те «добавочные блоки», которые дополняют последнюю строку с нормальными блоками в сетке.
Кстати, букв должно хватить, чтобы гарантировано заполнить последнюю строку до конца в худшем случае. Т.е. их число должно быть равно максимальному кол-ву блоков в строке.
Да, и, конечно же, с text-align: justify этот метод работает точно так же.

Но это были плюсы, а как же минусы? Минусы у этого варианта таковы:
Во-первых, в нестабильной работе в Opera, блоки в которой, временами имеют нечёткое выравнивание по сетке. Причём это касается только последней и предпоследней строк. Не понятно, из-за чего это происходит, к сожалению мне так и не удалось это выяснить. Возможно проблема кроется в том, что крайняя буква прилипает к блоку, не чувствуя между ними пробела. В любом случае, очень надеюсь на то, что в комментах кто нибудь сможет дать пояснение этой загвоздки. Но, в целом, это не выглядит безобразно, т.е. работает, но просто немного нестабильно.

Во-вторых, из-за создания дополнительных элементов снизу образовывается неприятный отступ, который происходит за счёт его размера шрифта и межстрочного интервала. Лекарство в виде обнуления шрифта + межстрочного интервала у родителя и восстановлением их в нормальное состояние у потомков — не приносит результата, так как нужная нам строка в псевдоэлементе становится невидимая, и наша сетка перестаёт её чувствовать и поддаваться дрессировке.
Но есть всё же «почти» выход из ситуации, это нижний отрицательный margin, который может подтянуть часть своего «хвоста», позволяя следующим за ним элементам налезать на него. Подробнее об этом можно почитать тут. Я сказал «почти», потому что этот способ выручает отчасти, я бы сказал, на половину, может чуть больше. Так как в момент создания, уже двух-строчного хвоста, из букв, подтянуть обе строки, уже не представляется возможности.

Во-третьих, чтобы заставить этот метод работать в IE6-7, нам потребуется заменить наш псевдоэлемент дополнительным блоком-помощником, который будет вставлен в конце списка. Плюс к этому придётся воспользоваться такими средствами, как text-justify, text-align-last (их поведение я уже описывал в этой статье), восстановлением свойства zoom в начальное состояние, у дополнительного блока и прочими «радостями», благодаря которым, в этих браузерах наш способ будет работать так же. В конце статьи я обязательно приведу разные варианты этой задачи, чтобы вы могли выбрать нужный.

Резюме

В этой статье мы доказали, что блочная сетка не такая уж и неподвластная. Как оказалось, это вполне управляемая конструкция. Мало того, красивое выравнивание блоков в сетке можно достичь совершенно обычным и не трудным способом, а результат позволяет нам легко использовать его плоды в любых проектах. Что я и делаю, когда предоставляется такая возможность.

Да, и конечно же, хочется выразить огромную благодарность Илье Стрельцыну (@SelenIT2) за его идеи и невероятную помощь в материалах. Без него бы этой статьи не было.

Все решения воедино

Обновление от 30.03.2017: Современное решение этой задачи на Grid Layout (без хаков и лишнего кода)

P.S. Это тоже может быть интересно:

CSS создание 3 блоков div в одной строке, структура div



Может быть, кто-нибудь может помочь мне со структурой divs, которая будет представлять изображение выше, и если есть какие-то специальные параметры css держателя div, или другие добавить их тоже?

css html
Поделиться Источник Tautvydas     09 января 2013 в 12:29

6 ответов

  • структура div и css

    У меня есть следующая структура страницы <div id =site-wrapper> <div id =banner> <div id=menu> <center>Menu Goes Here</center> </div> </div> <div id=content> <center>Content Goes here</center> </div> <div id=sidebar_r>…

  • HTML+CSS: как заставить содержимое div оставаться в одной строке?

    У меня есть длинный текст внутри div с определенным width : HTML: <div>Stack Overflow is the BEST !!!</div> CSS: div { border: 1px solid black; width: 70px; } Как я мог заставить строку оставаться в одной строке (то есть быть обрезанной в середине Overflow) ? Я попытался использовать…


9

Есть много способов сделать это, один из них-с относительным поплавком

<div>
    <div>Block1
    </div>
    <div>Block2
    </div>
    <div>Block3
    </div>
</div>

Это порождает что-то вроде

Поделиться alexb     09 января 2013 в 12:37


3

Как насчёт:

<div>a</div>
<div>b</div>
<div>c</div>

с CSS:

div {
  width: 33%;
  border: 1px solid red;
  float: left;
}
?

Поделиться FurloSK     09 января 2013 в 12:36


2

Если вы просите код html для выполнения визуального представления, как показано в вашем вопросе , это место http://csslayoutgenerator.com/ , где вы можете создать макеты html.

Поделиться Sowmya     09 января 2013 в 12:31

  • css inline-block div позиционирование

    Я пытаюсь исправить проблему постулирования в адаптивном дизайне. У меня есть контейнер div, содержащий 4 (но это может быть больше или меньше) divs, которые отображаются как встроенный блок. Я хотел бы знать, как контролировать количество дивов в строке при изменении размера страницы (с CSS, если…

  • CSS Выравнивание Небольших Блоков Div

    Так что в основном я сделал эти блоки из div, это мой HTML: <div> <div class=cp style=background-color: #FF6947;></div> <div class=cp style=background-color: #9400DE;></div> <div class=cp style=background-color: #16B5C9;></div> <div class=cp…


2

Рабочая Fiddle

CSS:

.div {
display:inline-block;
width:150px;
height:400px;
margin:0;
}
#one {
background:green;
}
#two {
background:red;
}
#three {
background:blue;
}

HTML:

<div></div>
<div></div>
<div></div>

Вы можете использовать свойство CSS display . И Указав inline-block .

Поделиться Muhammad Talha Akbar     09 января 2013 в 12:31


2

три div :

<div></div><div></div><div></div>

с css :

div {
 display: inline-block;
}

поместите в эти div все содержимое, которое вы хотите.

Вы также можете использовать float:left вместо свойства отображения.

Если вам нужен жидкий макет (первый и последний div имеют фиксированную ширину, а средний занимает все необходимое пространство), вы можете :

.firstDiv {
  float: left;
  width: 200px;
}

.lastDiv {
  float: right;
  width: 200px;
}

.middleDiv {
  margin-left: 200px;
  margin-right: 200px;
}

вы также можете использовать абсолютное позиционирование :

body {
  position: relative;
}

.firstDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 200px;
}

.lastDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 200px;
  right: 200px;
}

.middleDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 200px;
}

Поделиться Jerome Cance     09 января 2013 в 12:31


1

Взгляните на этот код JS Fiddle:

<div>Red</div>
<div>Green</div>
<div>Blue</div>

div {
    display:inline-block;
    width:100px;
    height:200px;
}

._1 {
    background-color:red;
}

._2 {
    background-color:green;
}

._3 {
    background-color:blue;
}

Поделиться madhead     09 января 2013 в 12:36

Похожие вопросы:


Выровнять текст внутри div с помощью CSS?

Как выровнять две части уравнения в одной строке. Пожалуйста, посмотрите на приведенную картинку, обе части находятся внутри div. Структура HTML выглядит следующим образом.. <div>…


Почему текст может быть написан в одной строке в div?

Я использую шаблон для создания веб-сайта. Проблема в том, что в слайдере я пишу текст внутри созданного мной div, и текст отображается в одной строке, поэтому он переполняет div. Я не могу понять,…


css-несколько встроенных блоков DIV сверху

Как выровнять несколько встроенных блоков div друг над другом, если больший div находится слева, например: EXAMPLE Я пытаюсь сделать так, чтобы эти две коробки были ниже двух других, но они сами…


структура div и css

У меня есть следующая структура страницы <div id =site-wrapper> <div id =banner> <div id=menu> <center>Menu Goes Here</center> </div> </div> <div…


HTML+CSS: как заставить содержимое div оставаться в одной строке?

У меня есть длинный текст внутри div с определенным width : HTML: <div>Stack Overflow is the BEST !!!</div> CSS: div { border: 1px solid black; width: 70px; } Как я мог заставить строку…


css inline-block div позиционирование

Я пытаюсь исправить проблему постулирования в адаптивном дизайне. У меня есть контейнер div, содержащий 4 (но это может быть больше или меньше) divs, которые отображаются как встроенный блок. Я…


CSS Выравнивание Небольших Блоков Div

Так что в основном я сделал эти блоки из div, это мой HTML: <div> <div class=cp style=background-color: #FF6947;></div> <div class=cp style=background-color:…


css метка и div в одной строке

Это мой html <div id=restaurantInformation> <ul> <li> <label>Logo</label> <div class=oneInfo> <div class=fileupload-new thumbnail > <img…


Несколько div в одной строке bootstrap

Я хочу несколько div в одной строке с опцией переполнения. .col-xs-3 a{height:100px;background:pink;display:block;margin-top:10px;padding:10px} <script…


Два div в одной строке с использованием css

Я хочу сделать два тега div в одной строке. Я попробовал использовать свойство css, такое как display: inline.But, но оно не работает. Я хочу, чтобы два выпадающих списка отображались в одной…

Css div в ряд – Тарифы на сотовую связь