Hoe zorg je ervoor dat div-elementen inline worden weergegeven?

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 brTAG.

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 brom 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 divsDAN DAN MOETEN DIE DIE divS 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 brTAGS:

<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-blockmet 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>

http://jsfiddle.net/f8L0Y5WX/


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”.

Other episodes