Как сделать так, чтобы элементы div отображались в строке?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Учитывая этот HTML:
<div>foo</div><div>bar</div><div>baz</div>
Как сделать так, чтобы они отображались в строке следующим образом:
Фу бар Баз
не так:
фу
бар
Баз
Решение
Тогда это другое:
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)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...отвечает на исходный вопрос...
Попробуйте написать это так:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Прочитав этот вопрос и ответы пару раз, все, что я могу сделать, это предположить, что там было довольно много правок, и я подозреваю, что вам дали неправильный ответ из-за недостаточного предоставления информации.Моя подсказка исходит из использования br ярлык.
Извиняюсь перед Дэррилом.Я читаю class="inline" как style="display:в соответствии".У вас есть правильный ответ, даже если вы используете семантически сомнительные имена классов ;-)
Неправильное использование br На мой взгляд, предоставление структурной компоновки, а не текстовой компоновки, слишком распространено.
Если вы хотите поместить в них больше, чем встроенные элементы divs тогда тебе следует их плавать divs, а не делать их встроенными.
Плавающие div:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Встроенные div:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Если вы гонитесь за первым, то это ваше решение и потерять эти br теги:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
обратите внимание, что ширина этих элементов div может меняться, поэтому не стесняйтесь задавать для них ширину, если вы хотите контролировать поведение.
Спасибо, Стив
Использовать display:inline-block с запасом и медиа-запросом для IE6/7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
Вы должны использовать
<span>вместо<div>для правильного пути в соответствии.потому что div — это элемент уровня блока, а вам нужны элементы уровня встроенного блока.
Вот html-код согласно вашим требованиям:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
У вас есть два способа сделать это
- используя простой
display:inline-block; - или используя
float:left;
поэтому вам нужно изменить свойство отображения display:inline-block; настойчиво
Пример первый
div {
display: inline-block;
}
Пример второй
div {
float: left;
}
вам нужно очистить поплавок
.main-div:after {
content: "";
clear: both;
display: table;
}
Как уже упоминалось, display:inline — это, вероятно, то, что вам нужно.Некоторые браузеры также поддерживают встроенные блоки.
Просто используйте обертку div с «float:left" и поместите внутрь поля, также содержащие float:левый:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
для меня нормально :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
<span> ?
Я бы использовал промежутки или переместил div влево.Единственная проблема с плавающим значением заключается в том, что после этого вам придется очистить число с плавающей запятой или в содержащем div должен быть установлен стиль переполнения auto.
Я знаю, что люди говорят, что это ужасная идея, но на практике она может быть полезна, если вы хотите сделать что-то вроде мозаичных изображений с комментариями под ними.напримерPicasaweb использует его для отображения миниатюр в альбоме.
См. пример/демо http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (класс goog-inline-block;Здесь я сокращаю это до ib)
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }
Учитывая этот CSS, установите для вашего div класс ib, и теперь он волшебным образом станет встроенным блочным элементом.
Вам нужно содержать три элемента div.Вот пример:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
Примечание:Атрибуты border-radius не являются обязательными и работают только в браузерах, совместимых с CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Обратите внимание, что элементы div «foo», «bar» и «baz» хранятся внутри элемента div «contain».
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Я думаю, вы можете использовать этот способ без использования CSS -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Прямо сейчас вы используете элемент уровня блока и получаете нежелательный результат.Таким образом, вы можете использовать встроенный элемент, например, span, small и т. д.
<span>foo</span><span>bar</span><span>baz</span>
мы можем сделать это как
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */
Я просто стараюсь делать их фиксированной ширины, чтобы они в сумме составляли общую ширину страницы — вероятно, это работает, только если вы используете страницу фиксированной ширины.Тоже «плавает».
