Question

我不知道从哪里开始学习如何在没有表的情况下进行这样的布局，或者最多只有一个两列的表作为一个简单的容器。我应该从哪里开始？

Answer 1

所以在看到你关于寻找带有两列字段集的布局的评论之后，我去写了一篇没有使用表格的文章：

<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;（宽度在那里使它们很好地排列）。通过浮动两个元素（在这种情况下为fieldsets，但它们可以是div s li s，任何元素），并确保它们的组合宽度小于其容器的宽度，可以实现漂亮的双列布局。

希望这有帮助。

带有fieldsets的两列页面

1 个答案: