Come si fa a visualizzare gli elementi div in linea?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Dato questo HTML:
<div>foo</div><div>bar</div><div>baz</div>
Come li fai visualizzare in linea in questo modo:
foo bar baz
non così:
foo
bar
baz
Soluzione
Questo è qualcos'altro allora:
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 -->
Altri suggerimenti
Un div inline è un maniaco del web & amp; dovrebbe essere battuto fino a quando non diventa un arco (almeno 9 volte su 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>
... risponde alla domanda originale ...
Prova a scriverlo in questo modo:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
Dopo aver letto questa domanda e le risposte un paio di volte, tutto quello che posso fare è supporre che ci sia stato un bel po 'di modifica in corso, e il mio sospetto è che ti sia stata data la risposta errata in base al fatto di non fornire abbastanza informazione. Il mio indizio viene dall'uso del br tag.
Chiedo scusa a Darryl. Ho letto class = & Quot; inline & Quot; come style = " display: inline " ;. Hai la risposta giusta, anche se usi nomi di classe semanticamente discutibili ;-)
L'uso mancante di divs per fornire layout strutturale piuttosto che per layout testuale è di gran lunga troppo diffuso per i miei gusti.
Se vuoi inserire più di elementi incorporati all'interno di questi div, dovresti spostare questi <=> s piuttosto che renderli in linea.
Div galleggianti:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Div in linea:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Se cerchi il primo, questa è la tua soluzione e perdi quei <=> tag:
<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>
nota che la larghezza di questi div è fluida, quindi sentiti libero di metterli su se vuoi controllare il comportamento.
Grazie, Steve
Usa display:inline-block con un margine e una query multimediale per 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>
Dovresti usare
<span>invece di<div>per il modo corretto di linea . perché div è un elemento a livello di blocco e il requisito è per gli elementi a livello di blocco inline.
Ecco il codice html secondo i tuoi requisiti:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
Hai due modi per farlo
- usando semplice
display:inline-block; - o usando
float:left;
quindi devi modificare la proprietà di visualizzazione <=> forzatamente
Esempio uno
div {
display: inline-block;
}
Esempio due
div {
float: left;
}
devi cancellare il float
.main-div:after {
content: "";
clear: both;
display: table;
}
Come detto, display: inline è probabilmente quello che vuoi. Alcuni browser supportano anche i blocchi in linea.
Basta usare un div wrapper con " float: left " e metti dentro scatole contenenti anche 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>
ok, per me:
<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>?
Userei span o float il div sinistro. L'unico problema con il floating è che devi cancellare il float in seguito o il div contenente deve avere lo stile di overflow impostato su auto
So che la gente dice che questa è un'idea terribile, ma in pratica può essere utile se vuoi fare qualcosa di simile a immagini di piastrelle con commenti sottostanti. per esempio. Picasaweb lo utilizza per visualizzare le anteprime in un album.
Vedi ad esempio / demo http: // closing-library. googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (blocco goog-inline di classe; l'ho abbreviato in ib qui)
/* 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; }
Dato quel CSS, imposta il tuo div in classe ib, e ora è magicamente un elemento di blocco in linea.
Devi contenere i tre div. Ecco un esempio:
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;
}
Nota: gli attributi border-radius sono opzionali e funzionano solo nei browser conformi a CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Nota che i div 'foo' 'bar' e 'baz' sono ciascuno contenuto nel div 'contenere'
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Penso che tu possa usare questo modo senza usare alcun css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
In questo momento stai usando un elemento a livello di blocco in questo modo stai ottenendo risultati indesiderati. Quindi puoi incorporare elementi come span, small etc.
<span>foo</span><span>bar</span><span>baz</span>
possiamo farlo come
.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 */
Tendo solo a renderle larghezze fisse in modo che si sommino alla larghezza totale della pagina - probabilmente funziona solo se stai usando una pagina a larghezza fissa. Anche & Quot; float & Quot ;.
