Risposte:
Questo è qualcos'altro quindi:
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 -->
Un div inline è un maniaco del web e 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 sulla base del non fornire abbastanza informazioni. Il mio indizio viene dall'uso del br
tag.
Scuse a Darryl. Ho letto class = "inline" come style = "display: inline". Hai la risposta giusta, anche se usi nomi di classe semanticamente discutibili ;-)
L'uso sfavorevole di br
fornire un layout strutturale piuttosto che un layout testuale è decisamente troppo diffuso per i miei gusti.
Se vuoi mettere più di elementi incorporati all'interno di questi, divs
allora dovresti fluttuare quelli div
piuttosto che renderli in linea.
Div galleggianti:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Div in linea:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Se cerchi il primo, questa è la tua soluzione e perdi quei br
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
Utilizzare 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 che<div>
per il modo corretto di inline . perché div è un elemento a livello di blocco e il requisito è per gli elementi a livello di blocco inline.
Ecco il codice html secondo le vostre esigenze:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;
float:left;
quindi devi cambiare la proprietà di visualizzazione display:inline-block;
con forza
Esempio uno
div {
display: inline-block;
}
Esempio due
div {
float: left;
}
devi cancellare il galleggiante
.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 mettere dentro le 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>
Vorrei usare 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 come immagini di piastrelle con commenti sottostanti. ad es. Picasaweb lo utilizza per visualizzare le anteprime in un album.
Vedi ad esempio / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (blocco goog-inline di classe; lo abbrevia 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>
Notare che i div 'foo' 'bar' e 'baz' si trovano all'interno del 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 puoi usare in 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 ecc.
<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 */