テーブルを使用しないCSSの2列レイアウト

Question

CSSで2列フォームレイアウトを使用するのはなぜ大変なのですか？

私が達成したいすべては次のとおりです。ここで

Name:   Joe Dude 
Age:   30 
Description: Some long text here that needs to wrap if it exceeds the border, 
       but still indent to align w/ the first line. 
Location:  New York 

は（いくつかの組み込みレイザー/ w）の私のHTMLです：ここでは

<div class="section"> 
    <label>Name:</label> 
    <span>@person.Name</span> 
    <label>Age:</label> 
    <span>@person.Age</span> 
    <label>Description:</label> 
    <span>@person.Description</span> 
    <label>Location:</label> 
    <span>@person.Location</span> 
</div> 

は私のCSSです：

.section 
{ 
    padding: 5px; 
    border-radius: 7px; 
    border: 1px solid #aaa; 
    margin:0 auto; 
} 
.section label 
{ 
    display:block; 
    font-weight:bold; 
    text-align:right; 
    width:50%; 
    float:left; 
} 

.section span 
{ 
    display:block; 
    text-align:left; 
    width:50%; 
    float:right; 
} 

このボーダーが上向きに折りたたまれていることを除いて、ほとんどの作品は、フォームの下で別の奇妙なラッピングが行われています。

私には何が欠けていますか？

ありがとうございます。

Answer 1

は、私は、@ graupのソリューションで出始め、それがラップテキスト/ wが働いていなかったとして、それを変更します。

.section 
{ 
    width:800px; 
    overflow: hidden; 
} 
.section label 
{ 
    display:block; 
    width:400px; 
    float:left; 
} 

.section span 
{ 
    width:400px; 
    display: inline-block; 
} 

Answer 2

オーバーフロー：非表示; .section

浮動小数点は本質的に.sectionがフロートしているため「空」です。オーバーフローハックはこれを修正します。

また、内側の要素の1つからfloat：を削除することもできます。

Answer 3

代替ソリューション：

.section label { 
    display: block; 
    float: left; 
    width: 200px; 
} 
.section span { 
    display: block; 
    margin-left: 200px; 
} 
.section span:after { 
    content: ""; 
    display: block; 
    clear: left; 
} 

これは、左の列のために静的な幅に依存しているが、また、割合とうまくラップしなければなりません！

IE7以上では：afterセレクタが好きかどうかはわかりません。

デモ：http://jsfiddle.net/y4NcC/

詳しい情報、およびレガシーIEのサポート：http://colinaarts.com/articles/float-containment/