使用'盒大小：邊界box`用`直列block`元素

我想用box-sizing: border-box CSS屬性的表單分成左，右前衛：使用'盒大小：邊界box`用`直列block`元素

<form class=container> 
    <fieldset class=left> 
    <label>Description</label> 
    <textarea name=description></textarea> 
    </fieldset> 
    <fieldset class=right> 
    <label>Name</label> 
    <input type=text name=name /> 
    </fieldset> 
</form>

爲了使這項工作，我需要在兩個<fieldset>元素浮到左：

.left, .right { 
    width: 50%; 
    margin-left: 0px; 
    marign-right: 0px; 
    box-sizing: border-box; 
    float: left; 
}

的問題當然是因爲<fieldset>的是浮動的，他們是在流動不再和<form>元素獲得一個0的高度（除非我添加一個clearfix或s omething）。如果我刪除浮動屬性並將它們的顯示更改爲inline-block，它們會恢復流動，但它們不再排列在彼此旁邊。

有沒有辦法在這裏使用border-box而不需要添加一個clearfix元素（或者:after僞元素）？

僅供參考，here's使用浮動的小提琴，here's使用內聯塊的小提琴。

來源

2012-10-31 aaronstacy

這是一個相當普遍的問題。

在容器上添加一個overflow值，將使瀏覽器重新計算容器的尺寸，儘管它沒有未浮動的元素。

.container { overflow: hidden; }

Before和After

來源

2012-10-31 22:04:33

使用'盒大小：邊界box`用`直列block`元素

回答

相關問題