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和3字段集的.fld类。类.fld1用于4和5字段集。

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

Answer 3

如果你想要除了第一个字段集之外的所有字段集都使用Anishs answe，如果你总是想要1-2-2-2等等布局see this fiddle

修改刚刚注意到这几乎与dtbarne的答案相同。接受他并使用我的行动来看待它

使用CSS的Fieldset HTML样式

3 个答案: