我不知道从哪里开始学习如何在没有表格的情况下进行这种布局，或者最多将一个两列表格作为一个简单的容器。我应该从哪里开始？
最佳答案
所以在看到您关于您正在寻找具有两列字段集的布局的评论后，我在没有使用表格的情况下写了这个布局:
<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;(其中的宽度使它们排列得很好)。通过 float 两个元素(在本例中为 fieldsets，但它们可以是 divs lis，任何元素)离开，并确保它们的组合宽度小于他们容器的宽度，你可以实现一个漂亮的两列布局。
希望这对您有所帮助。
关于html - 带有字段集的两列页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/930037/