Yanıtlar:
Bu başka bir şey:
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 -->Satır içi div, ağın bir ucubesidir ve açıklık haline gelene kadar dövülmelidir (10'un en az 9 katı) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>... orijinal soruyu cevaplar ...
Bunu şöyle yazmayı deneyin:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Bu soruyu ve cevapları birkaç kez okuduktan sonra, yapabileceğim tek şey oldukça fazla düzenleme olduğunu varsayalım ve şüphem yeterli bilgi vermeme dayalı olarak yanlış cevap verildiğidir. Benim ipucum bretiket kullanımından geliyor .
Darryl'den özür dilerim. Class = "inline" ı style = "display: inline" olarak okudum. Anlamsal olarak sorgulanabilir sınıf isimleri kullansanız bile doğru cevaba sahipsiniz ;-)
Özledim kullanımı brMetin mizanpajı yerine yapısal mizanpaj sağlamak için beğenmem için çok yaygındır.
Bunların içine satır içi öğelerden daha fazlasını koymak divsistiyorsanız, o zamandiv bunları satır içi yapmak yerine .
Kayan div'ler:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======Satır içi div'ler:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++Birincinin peşindeyseniz, bu sizin çözümünüzdür ve bu bretiketleri kaybedersiniz :
<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>Bu div'lerin genişliğinin akıcı olduğunu unutmayın, bu nedenle davranışı kontrol etmek istiyorsanız genişliklerini onlara koymaktan çekinmeyin.
Teşekkürler Steve
display:inline-blockIE6 / 7 için bir kenar boşluğu ve ortam sorgusu ile kullanın :
<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>Doğru satır içi yol
<span>yerine yerine kullanmalısınız . çünkü div bir blok seviyesi elemanıdır ve gereksiniminiz satır içi blok seviye elemanları içindir.<div>
İşte ihtiyaçlarınıza göre html kodu:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>display:inline-block;float:left;böylece display özelliğini display:inline-block;zorla değiştirmeniz gerekir
Birinci örnek
div {
display: inline-block;
}İkinci örnek
div {
float: left;
}şamandırayı temizlemelisin
.main-div:after {
content: "";
clear: both;
display: table;
}Belirtildiği gibi, display: satır içi muhtemelen istediğiniz şeydir. Bazı tarayıcılar satır içi blokları da destekler.
Sadece "float: left" ile bir sarıcı div kullanın ve float: left içeren kutuları da içine koyun:
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>Ben açıklık kullanır ya da div sol yüzer. Kayan ile ilgili tek sorun, daha sonra şamandırayı temizlemeniz veya içeren div'in taşma stilinin otomatik olarak ayarlanmış olmasıdır
İnsanların bunun korkunç bir fikir olduğunu söylediklerini biliyorum, ancak altında yorumlarla kiremit resimleri gibi bir şey yapmak istiyorsanız pratikte yararlı olabilir. örneğin Picasaweb bunu bir albümdeki küçük resimleri görüntülemek için kullanır.
Örneğin / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (class goog-inline-block; burada ib olarak kısaltırım)
/* 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; }Bu CSS göz önüne alındığında, div'inizi ib sınıfına ayarlayın ve şimdi sihirli bir şekilde satır içi blok öğesi.
Üç divi içermelisiniz. İşte bir örnek:
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;
}Not: kenarlık yarıçapı öznitelikleri isteğe bağlıdır ve yalnızca CSS3 uyumlu tarayıcılarda çalışır.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>"Foo" "bar" ve "baz" kelimelerinin her birinin "içeren" div içinde bulunduğunu unutmayın.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>Bence herhangi bir css kullanmadan bu şekilde kullanabilirsiniz -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>Şu anda blok seviyesi elemanını kullanarak istenmeyen sonuç elde edersiniz. Böylece yayılma alanı, küçük vb. Satır içi öğe yapabilirsiniz.
<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 */