Réponses:
C'est autre chose alors:
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 en ligne est un monstre du web et doit être battu jusqu'à ce qu'il devienne une travée (au moins 9 fois sur 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>... répond à la question d'origine ...
Essayez de l'écrire comme ceci:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Après avoir lu cette question et les réponses à quelques reprises, tout ce que je peux faire est de supposer qu'il y a eu pas mal de modifications en cours, et je soupçonne que vous avez reçu une réponse incorrecte basée sur le fait de ne pas fournir suffisamment d'informations. Mon indice vient de l'utilisation du brtag.
Toutes mes excuses à Darryl. J'ai lu class = "inline" comme style = "display: inline". Vous avez la bonne réponse, même si vous utilisez des noms de classe sémantiquement discutables ;-)
La mauvaise utilisation de br pour fournir une disposition structurelle plutôt que pour une disposition textuelle est beaucoup trop répandue à mon goût.
Si vous voulez mettre plus que des éléments en ligne à l'intérieur de ceux-ci, divsvous devriez les faire flotter divplutôt que de les faire en ligne.
Divs flottants:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======Divs en ligne:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++Si vous recherchez l'ancien, alors c'est votre solution et perdez ces brbalises:
<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>notez que la largeur de ces divs est fluide, alors n'hésitez pas à leur donner des largeurs si vous voulez contrôler le comportement.
Merci, Steve
Utilisation display:inline-blockavec une marge et une requête média pour 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>Vous devez utiliser à la
<span>place de<div>pour une manière correcte de inline . parce que div est un élément de niveau bloc et que vous avez besoin d'éléments de niveau bloc en ligne.
Voici le code html selon vos besoins:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>display:inline-block;float:left;vous devez donc changer la propriété d'affichage display:inline-block;avec force
Exemple un
div {
display: inline-block;
}Exemple deux
div {
float: left;
}vous devez nettoyer le flotteur
.main-div:after {
content: "";
clear: both;
display: table;
}Comme mentionné, display: inline est probablement ce que vous voulez. Certains navigateurs prennent également en charge les blocs en ligne.
Il suffit d'utiliser un div wrapper avec "float: left" et de mettre des boîtes à l'intérieur contenant également 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>J'utiliserais des travées ou ferais flotter le div à gauche. Le seul problème avec flottant est que vous devez effacer le flotteur par la suite ou que le div contenant doit avoir le style de débordement réglé sur auto
Je sais que les gens disent que c'est une idée terrible, mais cela peut en pratique être utile si vous voulez faire quelque chose comme des images de tuiles avec des commentaires en dessous. Par exemple, Picasaweb l'utilise pour afficher les vignettes d'un album.
Voir par exemple / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (classe goog-inline-block; je l'abrège en ib ici)
/* 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; }Étant donné que CSS, définissez votre div sur la classe ib, et maintenant c'est magiquement un élément de bloc en ligne.
Vous devez contenir les trois divs. Voici un exemple:
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;
}Remarque: les attributs border-radius sont facultatifs et ne fonctionnent que dans les navigateurs compatibles CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>Notez que les divs 'foo' 'bar' et 'baz' sont chacun tenus dans le div 'contain'.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>Je pense que vous pouvez utiliser cette méthode sans utiliser de CSS -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>En ce moment, vous utilisez l'élément de niveau bloc de cette façon, vous obtenez un résultat indésirable. Ainsi, vous pouvez vous en ligne élément comme span, small etc.
<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 */