Учитывая этот HTML:
<div>foo</div><div>bar</div><div>baz</div>
Как сделать так, чтобы они отображались на экране так:
Foo Bar Baz
не так:
Foo
Bar
Baz
Это что-то еще тогда:
div.inline { float:left; }
.clearBoth { clear:both; }
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->
Встроенный div - это извращенная сеть, и его нужно побеждать, пока он не станет промежутком (как минимум 9 раз из 10) ...
... отвечает на оригинальный вопрос ...
источник
Попробуйте написать это так:
источник
Прочитав этот вопрос и ответы пару раз, все, что я могу сделать, - это предположить, что редактирование происходило довольно часто, и я подозреваю, что вам дали неправильный ответ на основании недостаточного предоставления информации. Моя подсказка исходит от использования
br
тега.Извинения Дэррилу. Я прочитал class = "inline" как style = "display: inline". У вас есть правильный ответ, даже если вы используете семантически сомнительные имена классов ;-)
Упущенное использование
br
для обеспечения структурного макета, а не текстового макета слишком распространено на мой вкус.Если вы хотите поместить в них больше, чем встроенные элементы,
divs
вы должны использовать плавающие элементыdiv
вместо того, чтобы делать их встроенными.Плавающие divs:
Встроенные div:
Если вы после первого, то это ваше решение и потерять эти
br
теги:обратите внимание, что ширина этих элементов является плавной, поэтому не стесняйтесь указывать ширину, если вы хотите контролировать поведение.
Спасибо Стив
источник
Используйте
display:inline-block
с полем и медиа-запросом для IE6 / 7:источник
Вот HTML-код в соответствии с вашими требованиями:
У вас есть два способа сделать это
display:inline-block;
float:left;
так что вы должны
display:inline-block;
принудительно изменить свойство отображенияПример первый
Пример два
источник
Как уже упоминалось, display: inline, вероятно, то, что вы хотите. Некоторые браузеры также поддерживают встроенные блоки.
http://www.quirksmode.org/css/display.html#inlineblock
источник
Просто используйте div-обертку с «float: left» и поместите внутри коробки, также содержащие float: left:
CSS:
HTML:
источник
<span>
?источник
неплохо для меня :
источник
Я бы использовал пролеты или плавающий div слева. Единственная проблема с плавающей точкой заключается в том, что вы должны впоследствии очистить float или для содержащего div должен быть установлен стиль переполнения auto
источник
Я знаю, что люди говорят, что это ужасная идея, но на практике она может быть полезна, если вы хотите сделать что-то вроде мозаичных изображений с комментариями под ними. например, Picasaweb использует его для отображения миниатюр в альбоме.
Смотрите, например, / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (класс goog-inline-block; я сокращаю его до ib здесь)
Учитывая этот CSS, установите ваш div в класс ib, и теперь он волшебным образом является встроенным блочным элементом.
источник
Вы должны содержать три div. Вот пример:
CSS
Примечание: атрибуты border-radius являются необязательными и работают только в браузерах, совместимых с CSS3.
HTML
Обратите внимание, что div'ы 'foo', 'bar' и 'baz' хранятся внутри div-а.
источник
источник
Я думаю, что вы можете использовать этот способ без использования CSS -
Прямо сейчас вы используете элемент уровня блока, чтобы получить нежелательный результат. Таким образом, вы можете встроенный элемент, как span, small и т. Д.
источник
мы можем сделать это как
источник
http://jsfiddle.net/f8L0y5wx/
источник
источник
Я просто стремлюсь сделать их фиксированной ширины, чтобы они в сумме составляли общую ширину страницы - возможно, будет работать, только если вы используете страницу фиксированной ширины. Также «плаваю».
источник