Comment faire en sorte que les éléments div s'affichent en ligne?
Étant donné ce code HTML:
<div>foo</div><div>bar</div><div>baz</div>
Comment faites-vous les afficher en ligne comme ceci:
foo bar baz
pas comme ça:
foo
bar
baz
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 phénomène du web et devrait être battu jusqu'à ce qu'il devienne une durée (au moins 9 fois sur 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>
... répond à la question initiale ...
Essayez d'écrire comme ça:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Utilisez display:inline-block avec une requête de marge et de 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
<span>au lieu de<div>pour utiliser correctement inline. parce que div est un élément de niveau bloc et que votre exigence est pour les é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>
Vous avez deux façons de faire cela
- en utilisant simple
display:inline-block; - ou en utilisant
float:left;
donc vous devez changer la propriété d'affichage display:inline-block; avec force
Exemple 1
div {
display: inline-block;
}
Exemple deux
div {
float: left;
}
vous devez vider le flotteur
.main-div:after {
content: "";
clear: both;
display: table;
}
Utilisez simplement un div de wrapper avec "float: left" et mettez des cases à l'intérieur contenant aussi 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>
Comme mentionné, display: inline est probablement ce que vous voulez. Certains navigateurs prennent également en charge les blocs en ligne.
oK pour moi :
<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>?
Je voudrais utiliser des étendues ou laisser flotter la div à gauche. Le seul problème avec float est que vous devez effacer le float après coup ou que la div qui le contient 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 être utile dans la pratique si vous voulez faire quelque chose comme des images de mosaïque 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égez à 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 en classe ib, et maintenant c'est un élément de bloc en ligne comme par magie.
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 contenus dans la div.
<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 un élément de niveau bloc de cette façon, vous obtenez un résultat indésirable. Donc, vous pouvez vous élément en ligne comme span, petit etc.
<span>foo</span><span>bar</span><span>baz</span>
on peut faire ça comme
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</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 */
<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>