Блог

Главная - Вопросы по программированию - Набор полей для оформления HTML с использованием CSS

Набор полей для оформления HTML с использованием CSS

#html #css

#HTML #css

Вопрос:

У меня есть 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%). Если я уберу букву «б», наборы полей выстроятся рядом друг с другом случайным образом.

Я пробовал различные способы выровнять и настроить наборы полей в том порядке, в котором я хочу, используя CSS, включая использование float, clear, padding-left, но безрезультатно.

Существует ли надлежащая методология с использованием CSS, которую можно применить для получения желаемого эффекта, как показано выше?

спасибо.

Ответ №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>

Комментарии:

1. Упс, только что заметил, что забыл подключить класс clear вместо встроенных стилей. 🙂

2. попробовал применить ваш стиль к моей странице, и это не сработало. Он выровнял наборы полей от 1 до 5 по верхней части экрана. Я вырезал и вставил ваш код на чистую страницу, и я получил тот же эффект с макетом, который я получил. в настоящее время я использую IE7.

3. Использовали ли вы версию после обновления? У меня там была опечатка.

Ответ №2:

использовать 

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

class .fld для 2-го и 3-го наборов полей.
класс .fld1 для набора полей 4 и 5.

Вот рабочий пример:http://jsfiddle.net/anish/xaZDC /

Ответ №3:

Если вы хотите, чтобы все, кроме первого набора полей, передавались, используйте Anishs answe, если вы всегда хотите выкладывать 1-2-2-2 и т.д., посмотрите эту скрипку

РЕДАКТИРОВАТЬ Только что заметил, что это почти идентично ответу dtbarne. Примите его и используйте мой, чтобы увидеть это в действии