使用css的带有面板的表单

我想用css实现一个表单，对于不同的输入字段组有不同的面板

与此类似。 ![备选案文][1]

我知道这是一个桌面客户端。但是有什么方法可以通过fieldsets css实现这样的布局吗？

您可以使用：

然后将不同的表单元素放入字段集中。

CSS:

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

字段集{
宽度：33%；
浮动：左；
}

HTML:

安什里夫
纳希纳姆：
厚层裂谷
菲尔玛：
艾因科门
Jaresgehalt：

我不太确定问题出在布局的哪一部分。显然，您知道

fieldset

，并且您对它们的布局方式与对任何其他HTML元素（例如

div

）的布局方式完全相同

我猜是在专栏里。这里有两种可能性。A） 将一些

fieldset

s放入一个宽度为（100%/列数）的div中，并浮动这些div，或者B）如果您只需要支持现代浏览器，则使用CSS 3列属性，浏览器将自动计算每列

fieldset

s的数量：

（A）

#columns.column{
浮动：左；
宽度：33%；
}
...
...
...
...
...
...
...
...
...

（B）

#列{
列数：3
/*只是涵盖了所有的基础。不确定哪些浏览器真正支持这一点*/
-webkit列计数：3
-moz列计数：3
-o列计数：3
-ms列计数：3
}
...
...
...
...
...
...
...
...
...

请您更精确一点或举个例子好吗？注意：当您填充

字段集时，首先从
开始，然后是元素（您可能希望先将其放入定义列表
或
）。或者，您可以将列宽设置为33%或任何其他百分比，而不是固定宽度。谢谢，它几乎可以工作。我说几乎是因为请检查我这里有什么。第二行是顶部对齐的，不从上面单元格的底部开始。请确保重置CSS中的一些默认（浏览器）设置：
fieldset{margin:0；padding:0；}
和
图例{margin:0；padding:0；}
，并自己使用适当的边距。我不是说边距。我只想在第一行第三列的正下方开始第一行第三列，不与顶部对齐如果你仔细看这个示例图片，你会发现他不想要3个字段集相邻，而是3列，在这些列中需要放置字段集。为什么nest div在div中？您最好将div嵌套在
标记中。请注意，方法B有点棘手，因为它没有完全的浏览器支持。@Eric:这只是一个示例。可能是在列之外有更多的输入元素。
#col1, #col2, #col3 {
  float: left;
  width: 300px;
}

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

<fieldset>
   <legend>Anschrift</legend>

    <label for="nachname">Nachname:</label>
    <input id="nachname" name="nachname" type="text">
</fieldset>

<fieldset>
   <legend>Firmenanschrift</legend>

    <label for="firma">Firma:</label>
    <input id="firma" name="firma" type="text">
</fieldset>

<fieldset>
   <legend>Einkommen</legend>

    <label for="jaresgehalt">Jaresgehalt:</label>
    <input id="jaresgehalt" name="jaresgehalt" type="text">
</fieldset>

#columns .column {
   float: left;
   width: 33%;
}

<div id="columns">
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
</div>

#columns {
   column-count: 3
    /* Just covering all bases here. Not sure which browsers actually support this */
   -webkit-column-count: 3
   -moz-column-count: 3
   -o-column-count: 3
   -ms-column-count: 3
}

<div id="columns">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
</div>