7

次のサンプルの 2 つのspanタグは隣り合って表示されると思っていましたが、上下に表示されていました。widthクラスの.right を 49%に設定すると、spanそれらは隣り合って表示されます。padding/margin右側のスパンに見えない部分があり、50% 以上かかるように、右側のスパンが押し下げられている理由がわかりません。HTMLテーブルを使用せずにこれを実行しようとしています。何か案は？

* {
  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;
}
<html>

<head>
  <title>Test Page</title>

</head>

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

</html>

説明してくれてありがとう。float:leftFF 3.1 で期待どおりの結果が得られ、美しく動作します。残念ながら、IE6 では、右側のスパンは 50% の 50% をレンダリングするため、実際にはブラウザー ウィンドウの 25% の幅になります。幅を 100% に設定すると、目的の結果が得られますが、標準準拠モードの FF 3.1 では機能しなくなります。ハックに頼ったり、複数の CSS シートを使用したりせずに、FF と IE 6 の両方で動作させることは困難でした

4

3 に答える 3

3 
float: left;

それをspan.leftに追加してみてください

左にフロートします (構文で示されているように)。

私は決して CSS の専門家ではないので、これを議論の余地のない事実と見なさないでください。ただし、何かが浮かんでいる場合、その下にあるものの垂直位置に違いはありません。

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

Stackoverflow へようこそ。

于 2008-08-29T16:14:25.247 に答える
2

これは、 inline と inline-block に要素間に空白 (この場合は改行) が含まれているためです。あなたの場合、要素の合計幅は 50%+50%+空白 > 100% です。

HTMLドキュメントの同じ行に2つの要素を配置する必要があります（スペースなし）

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

私自身は後者の方が好きです。

于 2013-04-24T11:45:47.203 に答える
1

私はこのハックが好きではありませんが、FirefoxとIE6の両方でその仕事をしているようです：

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

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

于 2008-08-29T17:50:18.900 に答える