Frage

Ich habe erwartet, dass die beiden Span-Tags im folgenden Beispiel nebeneinander und stattdessen untereinander angezeigt werden.Wenn ich die Breite der Klasse span.right auf 49 % setze, werden sie nebeneinander angezeigt.Ich kann nicht herausfinden, warum die rechte Spanne nach unten gedrückt wird, da die rechte Spanne eine unsichtbare Polsterung/Rand hat, wodurch mehr als 50 % benötigt werden.Ich versuche, dies zu erreichen, ohne HTML-Tabellen zu verwenden.Irgendwelche Ideen?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

Danke für die Erklärung.Das float:left funktioniert wunderbar mit den erwarteten Ergebnissen in FF 3.1.Leider macht der rechte Seitenbereich in IE6 50 % der 50 % aus, was ihm tatsächlich eine Breite von 25 % des Browserfensters verleiht.Wenn Sie die Breite auf 100 % einstellen, werden die gewünschten Ergebnisse erzielt, aber FF 3.1, das sich im Standardkonformitätsmodus befindet, wird unterbrochen, und das verstehe ich.Es war eine Herausforderung, es sowohl in FF als auch IE 6 zum Laufen zu bringen, ohne auf Hacks zurückzugreifen oder mehrere CSS-Sheets zu verwenden

War es hilfreich?

Lösung 

float: left;

Versuchen Sie, das zu span.left hinzuzufügen

Dadurch wird es nach links verschoben (wie in der Syntax vorgeschlagen).

Ich bin keineswegs ein CSS-Experte, also betrachten Sie dies bitte nicht als unbestreitbare Tatsache, aber ich finde, dass es keinen Einfluss auf die vertikale Position der Dinge darunter hat, wenn etwas schwebend ist.

Wenn Sie span.right nach rechts verschieben und dann Text darunter hinzufügen, sollten Sie einige interessante Ergebnisse erhalten. Um diese „interessanten Ergebnisse“ zu stoppen, können Sie „clear“ verwenden:links/rechts/beide“, was dazu führt, dass der Block mit dem klaren Stil unter allem liegt, was nach links/rechts/beide schwebt. W3Schulen Habe auch eine Seite zu dieser Immobilie.

Und willkommen bei Stackoverflow.

Andere Tipps

Dies liegt daran, dass inline und inline-block Leerzeichen (in Ihrem Fall der Zeilenumbruch) zwischen den Elementen enthalten.In Ihrem Fall beträgt die kombinierte Breite der Elemente 50 % + 50 % + Leerzeichen > 100 %.

Sie sollten die beiden Elemente entweder in derselben Zeile in Ihrem HTML-Dokument platzieren (ohne Leerzeichen).

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

Oder verwenden Sie HTML-Kommentare

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

Ich selbst bevorzuge Letzteres.

Ich mag diesen Hack nicht, aber er scheint sowohl in Firefox als auch im IE6 zu funktionieren:

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

Beachten Sie das *width: 100% Dies scheint die Anforderungen von IE6 zu erfüllen und wird von Firefox ignoriert.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top