使用CSS的字段集HTML样式

我有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>

Fieldset1

字段集2
字段集3

字段集4
字段集5

容纳字段集的容器实际上是屏幕的全长（即：100%）。如果我把“br”拿出来，场集合会以一种随意的方式排列在一起

我尝试了各种方法来对齐和调整字段集，以使它们按照我希望的顺序使用CSS，包括使用float、clear和padding left，但都没有效果

是否有一个合适的方法使用CSS，可以应用，以获得想要的效果，如上所示

谢谢。

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

字段集{
宽度：200px；
浮动：左；
}
.清楚{
明确：两者皆有；
}
字段集1
字段集2
字段集3
字段集4
字段集5

使用

第2和第3个字段集的类fld。 4和5字段集的fld1类

---

下面是一个工作示例：

如果您希望除第一个字段集外的所有字段都流动，请使用Anishs answe，如果您始终希望1-2-2-2 etc布局

编辑

---

我注意到这和巴恩的答案几乎一样。接受他的，并使用我的查看它的实际操作

哎呀，我刚刚注意到我忘了插入clear类而不是内联样式。：）尝试将您的样式应用到我的页面，但无效。它将字段集1到5排列在屏幕顶部。我将您的代码剪切并粘贴到一个干净的页面中，我得到了与布局相同的效果。我目前正在使用IE7。更新后您是否使用了该版本？我有个打字错误。

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