带有fieldsets的两列页面

Question

带有fieldsets的两列页面

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

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>

Run Code Online (Sandbox Code Playgroud)

大多数样式只是为了使它排列好并且居中并提供一些对比.获取两列的方法是将两个字段集向左浮动.每个字段集都有一个名为.singleRow的类,它唯一重要的样式是float: left;(宽度在那里使它们很好地排列).通过浮动两个元素(在本例中为fieldsets,但它们可以是divs li,任何元素),并确保它们的组合宽度小于其容器的宽度,您可以实现一个漂亮的双列布局.

希望这可以帮助.

归档时间：	16 年，11 月前
查看次数：	12379 次
最近记录：	16 年，11 月前