0

私はこれをしたい：

ここに画像の説明を入力

これは私がこれまでに持っている HTML/CSS ですが、フロート、位置絶対/相対、左、左マージン、クリア、オーバーフローなどのさまざまな組み合わせを試した後、さまざまな長さを処理できません。

<!DOCTYPE html> 
<html>
<head>
    <style>
        .container {
        }
        .leftColumn {
            float:left;
        }
        .rightColumn {
            float:left;
            left:120px;
            position:absolute;
        }
        .clear {
            clear:both;
        }
    </style>
</head>
<body>
  <div class="container">
        <div class="leftColumn">Apr 14: Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 15: Another Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 16: A Still Longer Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>

</body>
</html>

上記のスクリーンショットのように、両方の列で可変長テキストを処理するには、上記の CSS に何を変更する必要がありますか?

4

1 に答える 1

3

このフィドルを参照してください：http://jsfiddle.net/UHMtW/

1）フロートをクリアするために、それらのひどい空のdivをすべて削除します（単に使用するeasyclearingか、他の構造的ではない同等の手法を使用してください）

</div>2）すべての締め切りがありません.rightColumn

3) この CSS コードを使用する [更新]

.container {
     height: auto; overflow: hidden; width: 100%;
     margin : 0 0 20px 0;
 }
 .leftColumn {
     float:left;
     width : 120px;
 }
 .rightColumn {
     margin-left: 120px;   
 }

もちろん、必要に応じて要素の幅を変更し、要素にいくらかのマージンを与え.containerます

（余談ですが、代わりに説明リストを使用することをお勧めしますが、これには左側の列の最大高さを設定する必要があります。または、見出しと段落を適切に使用して<dl>すべてを回避することもできます）<div>ification

于 2012-04-04T15:27:14.060 に答える