Wie lassen Sie Divelemente inline angezeigt?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Angesichts dieser HTML:
<div>foo</div><div>bar</div><div>baz</div>
Wie können Sie sie so anzeigen, wie folgt:
Foo Bar Baz
so nicht:
Foo
Bar
Baz
Lösung
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 -->Andere Tipps
Ein Inline -Div ist ein Freak des Webs und sollte geschlagen werden, bis es zu einer Spannweite 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 es einiges an Bearbeitung gegeben hat, und mein Verdacht ist, dass Sie die falsche Antwort erhalten haben, die nicht genügend Informationen bereitstellt. Mein Hinweis kommt von der Verwendung von br Schild.
Entschuldigung bei Darryl. Ich lese class = "inline" als style = "display: inline". Sie haben die richtige Antwort, auch wenn Sie semantisch fragwürdige Klassennamen verwenden ;-)
Die Fräulein Verwendung von br Das strukturelle Layout anstelle für Textlayout ist für meinen Geschmack viel zu weit verbreitet.
Wenn Sie mehr als Inline -Elemente in diese einsetzen möchten divs Dann sollten Sie diese schweben divs, anstatt sie inline zu machen.
Schwebende Divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline -Divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Wenn Sie nach ersteren suchen, dann ist dies Ihre Lösung und verlieren Sie diese br Stichworte:
<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 flüssig ist. Wenn Sie das Verhalten kontrollieren möchten, können Sie sie gerne Breite setzen.
Danke, Steve
Verwenden display:inline-block mit einer Margin- 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>
Du solltest benutzen
<span>Anstatt von<div>für die korrekte Art von in der Reihe. Weil Div ein Blockebene-Element ist und Ihre Anforderung für Elemente der Inline-Block-Ebene gilt.
Hier ist der HTML -Code gemäß Ihren Anforderungen:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
Sie haben zwei Möglichkeiten, dies zu tun
- Einfach verwenden
display:inline-block; - oder verwenden
float:left;
Sie müssen also die Anzeigeeigenschaft ändern display:inline-block; kraftvoll
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 Anzeige: Inline ist wahrscheinlich das, was Sie wollen. Einige Browser unterstützen auch Inline-Blocks.
Verwenden Sie einfach ein Wrapper Div mit "Float: Left" und geben Sie Kisten in auch Float: Links ein:
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 für mich :
<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> ?
Ich würde Spans verwenden oder die DIV links schweben. Das einzig
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 Fliesenbilder mit Kommentaren unter ihnen machen möchten. EG Picasaweb verwendet es, um die Miniaturansichten in einem Album anzuzeigen.
Siehe zum Beispiel/Demo http://clous-library.googlecode.com/svn/trunk/clous/goog/demos/inline_block_quirks.html (Klasse goog-inline-block; Ich habe es hier zu ib abkürzlich)
/* 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; }
Setzen Sie angesichts dieser CSS Ihre 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: Border-Radius-Attribute sind optional und funktionieren nur in CSS3-konformen 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 innerhalb der "Enthaltenden" Div gehalten werden.
<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 so verwenden, ohne CSS zu verwenden -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Im Moment verwenden Sie das Block -Level -Element auf diese Weise, wie Sie unerwünschtes Ergebnis erhalten. Sie können also Elemente wie Span, klein usw. ein Inline -Element investieren.
<span>foo</span><span>bar</span><span>baz</span>
Wir können das wie wie
.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 */
Ich neige nur dazu, sie feste Breiten zu machen, damit sie die Gesamtbreite der Seite addieren - wahrscheinlich funktioniert nur, wenn Sie eine Seite mit fester Breite verwenden. Auch "float".
