Відповіді:
Це щось інше тоді:
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 -->Вбудований дів - це виродження в Інтернеті, і його слід бити, поки він не стане розмахом (принаймні 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: inline". Ви маєте правильну відповідь, навіть якщо ви використовуєте семантично сумнівні назви класів ;-)
Пропущення використання brструктурного макета, а не текстового макета є занадто поширеним для мого вподобання.
Якщо ви хочете помістити в них більше, ніж вбудованих елементів, divsто вам слід буде плавати ці 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>зауважте, що ширина цих дівок є текучою, тому сміливо накладайте їх на ширину, якщо ви хочете контролювати поведінку.
Спасибі, Стів
Використовувати 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: left:
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>Я б скористався прольотами або поплавав би дівом ліворуч. Єдина проблема з плаваючою полягає в тому, що ви повинні очистити float після цього, або містить div повинен мати стиль переповнення, встановлений на auto
Я знаю, що люди кажуть, що це жахлива ідея, але вона на практиці може бути корисною, якщо ви хочете зробити щось на зразок плиткових зображень із коментарями під ними. наприклад, Picasaweb використовує його для відображення ескізів в альбомі.
Див. Наприклад / demo 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, і тепер це магічний елемент вбудованого блоку.
Потрібно містити три діви. Ось приклад:
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;
}Примітка: атрибути радіусу кордону необов’язкові і працюють лише в браузерах, сумісних з CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>Зауважте, що значки 'foo' 'bar' та 'baz' утримуються в розділі 'содержать'.
<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><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 */