不使用表格的CSS中的兩列布局

所有我想要做到的是：

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

這裏是我的HTML（W /一些嵌入式刀片）：

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

這幾乎可以工作，除了邊界向上塌陷，還有一些其他奇怪的包裝正在表單下方進行。

我錯過了什麼？

在此先感謝。

來源

2011-07-08 Jerad Rose

我開始了@ graup的解決方案，並改變它，因爲它沒有工作瓦特/換行的文本。

這裏是我最終與去的CSS：

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

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

來源

2011-07-12 18:19:54

overflow：hidden;在.section

浮動實質上使.section「空」，因爲它們浮出它。溢出攻擊修復了這個問題。

你也可以從裏面的一個元素中刪除浮點數。

來源

2011-07-08 21:26:39 graup

我的上帝先生，你是一個創造奇蹟的人。 –

謝謝！「overflow：hidden」部分似乎倒退了回來。但它確實解決了我的問題。 –

這似乎並沒有完全解決問題，標籤和跨越交換位置的寬度很小（或寬度很大） – xec

替代解決方案：

.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 selector。

演示：http://jsfiddle.net/y4NcC/

的更多信息，併爲傳統的IE瀏覽器支持：http://colinaarts.com/articles/float-containment/

來源

2011-07-08 21:40:17 xec

不使用表格的CSS中的兩列布局

回答

相關問題