スパンのインラインブロック

次のサンプルの2つのスパンタグが隣り合って表示されると予想されました。クラスspan.rightの幅を49％に設定すると、それらはお互い隣に表示されます。私は右のスパンが押されている理由を理解できません。右のスパンには見えないパディング/マージンがあり、50％以上の余裕があります。私はこれをHTMLテーブルを使用せずに済まそうとしています。何か案は？説明のためのスパンのインラインブロック

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

感謝。浮動小数点：左はFF 3.1で期待される結果で美しく動作します。残念なことに、IE6では、右側のスパンが50％の50％をレンダリングし、実際にブラウザウィンドウの幅の25％を与えます。幅を100％に設定すると望ましい結果が得られますが、FF 3.1では標準コンプライアンスモードになっていますが、わかりました。それはハックに頼るか、複数のCSSシートを使用せずに、6 FFとIEの両方で動作するように取得するspan.left

にそれはそれが浮くことになりますと付け加え挑戦

出典

2008-08-29 rams

なぜIE6をサポートしていますか？ http://www.ie6nomore.com/ – jrummell

float: left;

試してきました左（構文で示唆されているように）。

私は、このようunarguable事実を服用しないでください任意の手段によってCSSの専門家ではないが、私は何かが浮いているとき、それはそれ以下のものの垂直位置に違いはありませんことを見つけます。

右側にspan.rightをフロートさせ、その下にテキストを追加すると、興味深い結果が得られるはずです。これらの「興味深い結果」をブロックするには、「clear：left/right/both」を使用します左/右/両方に浮かんだものの下にある明確なスタイリング。 W3Schoolsにもこのプロパティに関するページがあります。

そして、Stackoverflowへようこそ。

出典

2008-08-29 16:14:25 Teifion

floatを追加してくれてありがとう：leftは2つのスパンを隣り合わせにレンダリングしました。しかし、私はなぜ、スパンがフロートなしで押し下げられるのか理解していません。何がそれをプッシュしますか？ – rams

スパンの高さはそれが私のためにそれを押し下げた理由であり、あなたの理由も非常にうまくいっている可能性があります。 – Johannes

私はこのハックを好きではないが、両方のFirefoxとIE6で仕事をするようだ：

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

はIE6の要件を満たしているようだとFirefoxによって無視され*width: 100%に注意してください。

出典

2008-08-29 17:50:18 rams

これは、インラインブロックとインラインブロックに要素間の空白（あなたの場合は改行）が含まれているためです。あなたの場合、要素の合計幅は50％+ 50％+空白> 100％です。

あなたは

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

またはHTMLコメントに

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

を使用します（スペースなし）HTMLドキュメント内の同じ行の2つの要素を入れなければならないのいずれか、私自身は後者を好みます。

出典

2013-04-24 11:45:47 eba

スパンのインラインブロック

答えて

関連する問題