使用CSS的Fieldset HTML樣式

Question

我有5個要在特定設計中布局的字段集。 全部具有相同的寬度，但可能具有不同的高度。

┌-[Fieldset 1]----┐
|                 |
|                 |
└-----------------┘
┌-[Fieldset 2]----┐  ┌-[Fieldset 3]----┐
|                 |  |                 |
|                 |  |                 |
|                 |  |                 |
└-----------------┘  └-----------------┘
┌-[Fieldset 4]----┐  ┌-[Fieldset 5]----┐
|                 |  |                 |
|                 |  |                 |
|                 |  |                 |
|                 |  |                 |
└-----------------┘  └-----------------┘

在我的HTML源代碼中，我想使源代碼“干凈”，從而刪除任何不必要的格式標簽，包括“ br”和“ p”。 字段集的容器設置為窗口的整個寬度。

我目前可以在此結構中設置樣式的唯一方法是，在要移動到下一行的字段集之后放置“ br”元素：

<fieldset style='width:200px;'><legend>Fieldset1</legend></fieldset><br/>
<fieldset style='width:200px;'><legend>Fieldset2</legend></fieldset>
<fieldset style='width:200px;'><legend>Fieldset3</legend></fieldset><br/>
<fieldset style='width:200px;'><legend>Fieldset4</legend></fieldset>
<fieldset style='width:200px;'><legend>Fieldset5</legend></fieldset>

保存字段集的容器實際上是屏幕的整個長度（即：100％）。 如果我以偶然的方式取出“ br”字段集，則彼此相鄰。

我嘗試了各種方法來對齊和調整要使用CSS的字段集的順序，包括使用float，clear，padding-left但無濟於事。

是否有使用CSS的適當方法可用於獲得所需的預期效果，如上所示？

謝謝。

Answer 1

<style type="text/css">
fieldset {
    width: 200px;
    float: left;
}

.clear {
    clear: both;
}
</style>

<fieldset><legend>Fieldset1</legend></fieldset>
<fieldset class="clear"><legend>Fieldset2</legend></fieldset>
<fieldset><legend>Fieldset3</legend></fieldset>
<fieldset class="clear"><legend>Fieldset4</legend></fieldset>
<fieldset><legend>Fieldset5</legend></fieldset>

Answer 2

采用

.fld{float:left;}
.fld1{float:left;}

2和3rd字段集的.fld類。 4和5字段集的.fld1類。

這是工作示例： http : //jsfiddle.net/anish/xaZDC/

Answer 3

如果要讓除第一個字段集以外的所有字段都使用Anishs answe，如果您始終希望1-2-2-2等布局， 請參閱此提琴

編輯剛注意到，這幾乎與dtbarne的答案相同。 接受他的並使用我的來觀看它的動作