Страница с двумя столбцами с наборами полей - PullRequest
4 голосов
/ 30 мая 2009

Я не знаю, с чего начать изучение создания такого макета без таблиц или не более одной таблицы с двумя столбцами в виде простого контейнера. С чего мне начать?

1 Ответ

7 голосов
/ 31 мая 2009

Итак, увидев ваш комментарий о том, что вы ищете макет с двумя столбцами наборов полей, я пошел и написал этот без использования таблиц:

<html>
<head>
<title>Two Column Fieldsets</title>

<style>
html, body
{
  background: #156;
  text-align: center;
}

#container
{
  background: #FFF;
  border: 1px #222 solid;
  height: 600px;
  margin: 0 auto;
  text-align: left;
  width: 700px;
}

#container form
{
  margin: 0 auto;
}

label
{
  float: left;
  width: 50px;
}

.singleRow
{
  float: left;
  width: 322px;
}

</style>

</head>
<body>
<div id="container">
  <form action="">
    <fieldset class="singleRow">
      <label for="1">Text:</label>
      <input id="1" type="text" />
      <input type="submit" value="submit" />
    </fieldset>
    <fieldset class="singleRow">
      <label for="2">Text:</label>
      <input id="2" type="text" />
      <input type="submit" value="submit" />
    </fieldset>  
  </form>
</div>
</body>
</html>

Большинство стилей просто для того, чтобы они выстроились в линию и были центрированы, а также для обеспечения некоторого контраста. Чтобы получить два столбца, нужно сместить оба набора полей влево. У каждого набора полей есть класс .singleRow, чей единственный важный стиль - float: left; (ширина здесь, чтобы они выстроились в ряд). Плавая оба элемента (в данном случае это наборы полей, но они могут иметь div s li s, любой элемент) слева, и убедившись, что их объединенная ширина меньше ширины их контейнера, вы можете получить хороший двухколонный макет.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...