div mit display: inline-block haben Zwischenabstände

[Subsurf]

Hallo allerseits,

für ein Projekt wollte ich eine "Pseudotabelle" aus nebeneinander platzierten div's erstellen.

Grundaufbau zur Veranschaulichung:

<style type="text/css">  
<![CDATA[  
    #container {  
        width: 1000px;  
    }  
    .cell {  
        width: 25%;  
        background-color: green;  
    }  
]]>  
</style>  
<!-- Container-Element zur Gruppierung -->  
<div id="container">  
    <!-- Eigentliche "Tabellenzellen" -->  
    <div class="cell">A</div>  
    <div class="cell">B</div>  
    <div class="cell">C</div>  
    <div class="cell">D</div>  
</div>

Um die div's nebeneinander zu zwingen hatte ich erst float: left; ausprobiert, doch da das das gesamte Layout der Seite zerriss habe ich dann display: inline-block; probiert.
Das funktioniert auch super, doch leider werden die div's nicht direkt nebeneinander angeordnert, sondern mit kleinen Zwischenabständen, sodass - im Falle meines Beispiels - nun keine ununterbrochene grüne Fläche entsteht.

Woher kommt denn der Zwischeanbstand bei inline-block? Würde man float nutzen würden die div's ja auch ohne Abstand aneinandergereiht.

[ChrisB]

Hi,

Woher kommt denn der Zwischeanbstand bei inline-block?

Der steht im Quelltext.

Würde man float nutzen würden die div's ja auch ohne Abstand aneinandergereiht.

Das ist ein Äpfel&Birnen-Vergleich. float hat nun mal andere Auswirkungen, weil es Elemente aus dem Flow nimmt.

MfG ChrisB

[suit]

Woher kommt denn der Zwischeanbstand bei inline-block?

Der steht im Quelltext.

Vermutlich als Whitespace zwischen den Elementen.

[Subsurf]

Woher kommt denn der Zwischeanbstand bei inline-block?

Der steht im Quelltext.

Vermutlich als Whitespace zwischen den Elementen.

Es kann so einfach sein!
Die Zeilenumbrüche nach jedem div sind natürlich Whitespaces, und diese rufen tatsächlich die Lücke hervor. Wenn man alle div's in eine Zeile direkt hintereinander schreibt, ist die Lücke weg. Ist zwar unschön, aber das ist die Lösung!

[suit]

Ist zwar unschön, aber das ist die Lösung!

Das ist nicht unschön sondern "works as designed"

inline-block-Elemente befinden sich ganz normal im Textfluss und wenn da ein Leerzeichen ist, soll das gefälligst auch angezeigt werden ;)

Wenn du "Hello World" schreibst soll die Ausgabe doch auch nicht "HelloWorld" sein :)

[Matthias Apsel]

Om nah hoo pez nyeetz, Subsurf!

nicht so:

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

sondern so:

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

dann bleibt die Übersichtlichkeit erhalten, auch wenn es etwas ungewohnt aussieht.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

<div>text

</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

>   
> dann bleibt die Übersichtlichkeit erhalten, auch wenn es etwas ungewohnt aussieht.  
  
Kann aber auch Nebenwirkungen haben, da dann an jeden Element\_inhalt\_ ein Whitespace angehängt wird. Dadurch können gegebenenfalls die Element-Abmessungen nicht mehr stimmen.  
  
Da ich Versionen mit zeilenübergreifenden Tags wie z.B.  
  
~~~html
<div>text</div  

><div>text</div  
><div>text</div  
><div>text</div  
><div>text</div>

allerdings für ziemlich kaputt und potentiell fehlerträchtig halte, bevorzuge ich den Weg über Kommentare:

<div>text</div><!--  
--><div>text</div><!--  
--><div>text</div><!--  
--><div>text</div><!--  
--><div>text</div>

die paar Zeichen mehr machen auch nichts aus

Cü,

Kai

[molily]

bevorzuge ich den Weg über Kommentare:

<div>text</div><!--

--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

  
Dafür sind Kommentare dafür bekannt, im [IE6 Probleme auszulösen](http://www.positioniseverything.net/explorer/dup-characters.html). ;) Ich weiß allerdings nicht, wie das bei display:inline-block (hasLayout für den IE<8) ist, dieser Bug bezieht sich auf Floats. Grundproblem ist aber, dass IE6 einen Kommentar als eine Art unsichtbares Element ansieht.  
Gut, wer entwickelt schon noch für IE6, könnte man einwenden. IE7 löst zwar das verlinkte Problem, aber arbeitet immer noch mit hasLayout.  
  
Mathias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

nicht so:

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

sondern so:

<div>text

</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

  
Das ist aber nicht dasselbe (Whitespaces in Textknoten).  
  
So geht’s auch:  
  
~~~html
 <div>text</div  

><div>text</div  
><div>text</div  
><div>text</div  
><div>text</div  
>

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

So geht’s auch:

 <div>text</div

> ><div>text</div
> >

Da halte ichs wie Kai.

Matthias

[Joachim]

Hi,

Um die div's nebeneinander zu zwingen hatte ich erst float: left; ausprobiert, doch da das das gesamte Layout der Seite zerriss

gib dem Container ein

overflow:hidden;
 /* ie6 */
 zoom: 1;

Das funktioniert auch super, doch leider werden die div's nicht direkt nebeneinander angeordnert,

Browser? Normalerweise sollte das kein Problem sein, nur im ie6 ist es ein Unterschied, ob Du ein Inline-, oder ein Block-Element mit display:inline-block versiehst.

Gruesse, Joachim

[Gunnar Bittersmann]

@@Subsurf:

nuqneH

<style type="text/css">

<![CDATA[
    #container {
        width: 1000px;
    }
    .cell {
        width: 25%;
        background-color: green;
    }
]]>
</style>

Der Inhalt des 'style'-Elements ist kein valides CSS. Du müsstest '<![CDATA[' und ']]>' auskommentieren:

[code lang=css]/* <![CDATA[ /
/ ]]> */

  
Wozu kennzeichnest du das überhaupt als CDATA? Bei CSS sollte das in den allermeisten Fällen nicht erforderlich sein.  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)