Gezien deze HTML:
<div>foo</div><div>bar</div><div>baz</div>
Hoe zorg je ervoor dat ze inline als volgt worden weergegeven:
foo bar baz
niet zo:
foo
bar
baz
Antwoord 1, autoriteit 100%
Dat is dan iets anders:
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 -->
Antwoord 2, autoriteit 97%
Een inline div is een freak van het web & moet worden geslagen totdat het een span wordt (minstens 9 van de 10 keer)…
<span>foo</span>
<span>bar</span>
<span>baz</span>
…beantwoordt de oorspronkelijke vraag…
Antwoord 3, autoriteit 65%
Probeer het als volgt te schrijven:
div { border: 1px solid #CCC; }
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
Antwoord 4, Autoriteit 12%
Nadat ik deze vraag en de antwoorden een paar keer heb gelezen, alles wat ik kan doen is aannemen dat er nogal wat bewerkingen is geweest, en mijn vermoeden is dat je het onjuiste antwoord hebt gekregen op basis van het niet genoeg informatie. Mijn aanwijzing komt van het gebruik van br
TAG.
Excuses aan Darryl. Ik lees klasse = “Inline” als style = “Display: Inline”. Je hebt het juiste antwoord, zelfs als je semantisch dubieuze klasnamen gebruikt; -)
Het gebruik van de Miss van br
om de structurele lay-out te bieden in plaats van voor tekstuele lay-out is veel te vaak voorkomen voor mijn smaak.
Als u meer wilt plaatsen dan inline-elementen in die divs
DAN DAN MOETEN DIE DIE div
S BLOEKEN in plaats van ze in te stellen.
DIREATED DIVEN:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline DIVS:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Als u achter de eerste bent, dan is dit uw oplossing en verliest u die 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>
merk op dat de breedte van deze div’s vloeiend is, dus voel je vrij om er breedtes op te zetten als je het gedrag wilt controleren.
Bedankt,
Steve
Antwoord 5, autoriteit 8%
Gebruik display:inline-block
met een marge en mediaquery voor 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>
Antwoord 6, autoriteit 6%
U moet
<span>
gebruiken in plaats van<div>
voor een correcte manier van
inline. omdat div een element op blokniveau is, en uw vereiste is voor inline-blokniveau-elementen.
Hier is html-code volgens uw vereisten:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
Je kunt dit op twee manieren doen
- met behulp van eenvoudige
display:inline-block;
- of met behulp van
float:left;
dus u moet de weergave-eigenschap display:inline-block;
krachtig wijzigen
Voorbeeld
div {
display: inline-block;
}
Voorbeeld twee
div {
float: left;
}
je moet float wissen
.main-div:after {
content: "";
clear: both;
display: table;
}
Antwoord 7, autoriteit 3%
Zoals gezegd is display:inline waarschijnlijk wat je zoekt. Sommige browsers ondersteunen ook inline-blocks.
http://www.quirksmode.org/css/display.html#inlineblock
Antwoord 8, autoriteit 2%
Gebruik gewoon een wrapper-div met “float: left” en plaats er vakjes in die ook float: left:
bevatten
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>
Antwoord 9, Autoriteit 2%
OK, voor mij:
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
Antwoord 10, Autoriteit 2%
<span>
?
Antwoord 11
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Antwoord 12
Ik weet dat mensen zeggen dat dit een vreselijk idee is, maar het kan in de praktijk nuttig zijn als je iets als tegelafbeeldingen wilt doen met opmerkingen eronder. b.v. Picasaweb gebruikt het om de miniaturen in een album weer te geven.
Zie bijvoorbeeld / Demo http: // Closure-Library. googlecode.com/svn/trunk/classy/gooog/demos/inline_block_quirks.html (klasse goog-inline-block; Ik ben het hier aankort naar IB)
/* 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; }
Gegeven dat CSS, uw DIV-aan Klasse IB instellen, en nu is het op magische wijze een inline-blokelement.
Antwoord 13
Ik zou spans gebruiken of de div naar links laten zweven. Het enige probleem met floaten is dat je daarna de float moet wissen of dat de bevattende div de overloopstijl moet hebben ingesteld op auto
Antwoord 14
U moet de drie div’s bevatten. Hier is een voorbeeld:
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;
}
Opmerking: border-radius-attributen zijn optioneel en werken alleen in CSS3-compatibele browsers.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Merk op dat de div’s ‘foo’ ‘bar’ en ‘baz’ elk binnen de ‘contain’ div staan.
Antwoord 15
Ik denk dat je deze manier kunt gebruiken zonder CSS –
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Op dit moment gebruik je elementen op blokniveau, zodat je een ongewenst resultaat krijgt. Zo kun je inline elementen zoals span, small etc.
<span>foo</span><span>bar</span><span>baz</span>
Antwoord 16
We kunnen dit doen als
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
Antwoord 17
<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>
Antwoord 18
<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 */
Antwoord 19
Ik heb de neiging om ze vast te maken met de breedte, zodat ze optellen aan de totale breedte van de pagina – werkt waarschijnlijk alleen als u een pagina met een vaste breedte gebruikt. Ook “zweven”.