Odpowiedzi:
To coś innego:
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 -->Inline div jest wybrykiem sieci i należy go pokonać, aż stanie się rozpiętością (co najmniej 9 razy na 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>... odpowiada na oryginalne pytanie ...
Spróbuj napisać w ten sposób:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Po kilkukrotnym przeczytaniu tego pytania i odpowiedzi mogę jedynie założyć, że trwało sporo edycji, i podejrzewam, że otrzymałeś niepoprawną odpowiedź z powodu niewystarczającej ilości informacji. Moja wskazówka pochodzi od użycia brtagu.
Przepraszam Darryl. Czytam class = „inline” jako style = „display: inline”. Masz poprawną odpowiedź, nawet jeśli używasz semantycznie wątpliwych nazw klas ;-)
Nieudane użycie brdo zapewnienia układu strukturalnego zamiast do układu tekstowego jest zdecydowanie zbyt powszechne dla moich upodobań.
Jeśli chcesz umieścić w nich więcej niż elementy wbudowane divs, powinieneś unosić te elementy divzamiast umieszczać je w linii.
Pływające divy:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======Inline divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++Jeśli szukasz pierwszego, oto twoje rozwiązanie i zgub te brtagi:
<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>zwróć uwagę, że szerokość tych div jest płynna, więc możesz je nałożyć, jeśli chcesz kontrolować zachowanie.
Dzięki, Steve
Użyj display:inline-blockz marginesem i zapytaniem o media dla 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>Należy użyć
<span>zamiast<div>do prawidłowego sposobu inline . ponieważ div jest elementem na poziomie bloku, a twoje wymagania dotyczą elementów na poziomie bloku wbudowanego.
Oto kod HTML zgodnie z Twoimi wymaganiami:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>display:inline-block;float:left;więc musisz display:inline-block;zdecydowanie zmienić właściwość wyświetlania
Przykład pierwszy
div {
display: inline-block;
}Przykład drugi
div {
float: left;
}musisz wyczyścić pływak
.main-div:after {
content: "";
clear: both;
display: table;
}Jak wspomniano, display: inline jest prawdopodobnie tym, czego chcesz. Niektóre przeglądarki obsługują również bloki wbudowane.
Wystarczy użyć div otoki z „float: left” i umieścić w środku pola zawierające również 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>Używałbym rozpiętości lub unosiłbym div w lewo. Jedynym problemem związanym z przestawianiem jest to, że musisz później wyczyścić zmiennoprzecinkową, lub zawierający div musi mieć styl przepełnienia ustawiony na auto
Wiem, że ludzie twierdzą, że to okropny pomysł, ale w praktyce może być przydatny, jeśli chcesz zrobić coś w rodzaju obrazów kafelkowych z komentarzami pod nimi. np. Picasaweb używa go do wyświetlania miniatur w albumie.
Zobacz na przykład / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (klasa goog-inline-block; tutaj skracam do 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; }Biorąc pod uwagę, że CSS, ustaw div na klasę ib, a teraz jest magicznie wbudowanym elementem blokowym.
Musisz zawierać trzy divy. Oto przykład:
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;
}Uwaga: atrybuty border-radius są opcjonalne i działają tylko w przeglądarkach zgodnych z CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>Zauważ, że pasek div foo i pasek baz są przechowywane w div zawierającym.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>Myślę, że możesz używać tego w ten sposób bez użycia css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>W tej chwili używasz elementu poziomu bloku w ten sposób, aby uzyskać niechciany wynik. Możesz więc wstawić element taki jak rozpiętość, mały itp.
<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 */