Форма с панелями с использованием CSS

Question

Я хочу получить форму, используя CSS, которые имеют разные панели для разных групп полей ввода.

Похоже на это. ! [альтернативный текст] [1]

Я знаю, что это настольный клиент. Но есть ли способ добиться такого расположения с помощью fieldsets css?

Answer 1

Вы можете использовать float :

<form>
  <div id="col1">
    <fieldset id="fldst1"></fieldset>
    <fieldset id="fldst2"></fieldset>
    <fieldset id="fldst3"></fieldset>
  </div>
  <div id="col2">
    <fieldset id="fldst4"></fieldset>
    <fieldset id="fldst5"></fieldset>
  </div>
  <div id="col3">
    <fieldset id="fldst6"></fieldset>
    <fieldset id="fldst7"></fieldset>
    <fieldset id="fldst8"></fieldset>
  </div>
  <div style="clear:both;" />
</form>

В вашем CSS:

#col1, #col2, #col3 {
  float: left;
  width: 300px;
}

Затем вы помещаете различные элементы формы в наборы полей.

Answer 2

Я не совсем уверен, какая именно часть макета является проблемой.Вы, очевидно, знаете о fieldset и размещаете их точно так же, как и любой другой элемент HTML (например, div).

Я предполагаю, что это столбцы.У вас есть две возможности здесь.A) Либо поместите число fieldset s в элемент div с шириной (100% / количество столбцов) и поместите эти элементы в div, либо B), если вам требуется только поддержка современных браузеров, используйте свойства столбцов CSS 3, и браузер будетвычислите количество fieldset с для каждого столбца автоматически:

A)

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

B)

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

Answer 3

CSS:

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

HTML:

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