Antworten:
Das ist dann etwas anderes:
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 -->
Ein Inline-Div ist ein Freak des Webs und sollte geschlagen werden, bis es eine Spanne wird (mindestens 9 mal von 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>
... beantwortet die ursprüngliche Frage ...
Versuchen Sie es so zu schreiben:
div { border: 1px solid #CCC; }
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
Nachdem ich diese Frage und die Antworten ein paar Mal gelesen habe, kann ich nur davon ausgehen, dass einiges an Bearbeitung stattgefunden hat, und mein Verdacht ist, dass Sie die falsche Antwort erhalten haben, weil Sie nicht genügend Informationen bereitgestellt haben. Mein Hinweis kommt von der Verwendung von br
Tag.
Entschuldigung an Darryl. Ich habe class = "inline" als style = "display: inline" gelesen. Sie haben die richtige Antwort, auch wenn Sie semantisch fragwürdige Klassennamen verwenden ;-)
Die fehlende Verwendung von br
strukturellem Layout anstelle von Textlayout ist für meinen Geschmack viel zu weit verbreitet.
Wenn Sie mehr als Inline-Elemente in diese einfügen möchten, divs
sollten Sie diese div
s schweben lassen, anstatt sie inline zu machen.
Floated Divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline-Divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Wenn Sie nach dem ersteren suchen, ist dies Ihre Lösung und Sie verlieren diese br
Tags:
<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>
Beachten Sie, dass die Breite dieser Divs fließend ist. Wenn Sie das Verhalten steuern möchten, können Sie sie auch mit Breiten versehen.
Danke, Steve
Verwendung display:inline-block
mit Rand- und Medienabfrage für 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>
Sie sollten
<span>
anstelle von<div>
für die richtige Art der Inline verwenden . weil div ein Element auf Blockebene ist und Sie Inline-Elemente auf Blockebene benötigen.
Hier ist HTML-Code gemäß Ihren Anforderungen:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;
float:left;
Sie müssen also die Anzeigeeigenschaft display:inline-block;
zwangsweise ändern
Beispiel eins
div {
display: inline-block;
}
Beispiel zwei
div {
float: left;
}
Sie müssen Float löschen
.main-div:after {
content: "";
clear: both;
display: table;
}
Wie bereits erwähnt, ist display: inline wahrscheinlich das, was Sie wollen. Einige Browser unterstützen auch Inline-Blöcke.
Verwenden Sie einfach ein Wrapper-Div mit "float: left" und legen Sie Kisten hinein, die auch float: left enthalten:
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>
Ich würde Spannweiten verwenden oder die Div nach links schweben lassen. Das einzige Problem beim Floating ist, dass Sie den Float anschließend löschen müssen oder für das enthaltene Div der Überlaufstil auf auto eingestellt sein muss
Ich weiß, dass die Leute sagen, dass dies eine schreckliche Idee ist, aber es kann in der Praxis nützlich sein, wenn Sie so etwas wie Kachelbilder mit Kommentaren darunter machen möchten. zB Picasaweb verwendet es, um die Miniaturansichten in einem Album anzuzeigen.
Siehe zum Beispiel / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (Klasse goog-inline-block; ich kürze es hier mit ib ab)
/* 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; }
Wenn Sie CSS verwenden, setzen Sie Ihr div auf die Klasse ib, und jetzt ist es auf magische Weise ein Inline-Blockelement.
Sie müssen die drei Divs enthalten. Hier ist ein Beispiel:
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;
}
Hinweis: Rahmenradiusattribute sind optional und funktionieren nur in CSS3-kompatiblen Browsern.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Beachten Sie, dass die Divs 'foo' 'bar' und 'baz' jeweils im 'include' div enthalten sind.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Ich denke, Sie können diesen Weg ohne CSS verwenden -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Im Moment verwenden Sie ein Element auf Blockebene, sodass Sie unerwünschte Ergebnisse erhalten. So können Sie Inline-Elemente wie 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 */