Question

为什么让两列表单布局在CSS中工作真是太尴尬了？

我想要完成的是：

Name:         Joe Dude
Age:          30
Description:  Some long text here that needs to wrap if it exceeds the border,
              but still indent to align w/ the first line.
Location:     New York

这是我的HTML（带有一些嵌入式Razor）：

<div class="section">
    <label>Name:</label>
    <span>@person.Name</span>
    <label>Age:</label>
    <span>@person.Age</span>
    <label>Description:</label>
    <span>@person.Description</span>
    <label>Location:</label>
    <span>@person.Location</span>
</div>

这是我的CSS：

.section
{
    padding: 5px;
    border-radius: 7px;
    border: 1px solid #aaa;
    margin:0 auto;
}
.section label
{
    display:block;
    font-weight:bold;
    text-align:right;
    width:50%;
    float:left;
}

.section span
{
    display:block;
    text-align:left;
    width:50%;
    float:right;
}

这几乎有效，除了边框向上折叠，其他一些奇怪的包装正在表格下方。

我错过了什么？

提前致谢。

Answer 1

溢出：隐藏;在.section

浮动基本上使.section“空”，因为它们漂浮出来。溢出黑客修复了这个问题。

你也可以从里面的一个元素中移除浮动：

Answer 2

我开始使用@ graup的解决方案，并对其进行了修改，因为它不适用于包装文本。

这是我最终选择的CSS：

.section
{
    width:800px;
    overflow: hidden;
}
.section label
{
    display:block;
    width:400px;
    float:left;
}

.section span
{
    width:400px;
    display: inline-block;
}

Answer 3

替代解决方案：

.section label {
    display: block;
    float: left;
    width: 200px;
}
.section span {
    display: block;
    margin-left: 200px;
}
.section span:after {
    content: "";
    display: block;
    clear: left;
}

这依赖于左列的静态宽度，但也应该很好地包装百分比！

我不确定IE7和老版本是否喜欢：after选择器。

演示：http://jsfiddle.net/y4NcC/

有关旧版IE的更多信息和支持：http://colinaarts.com/articles/float-containment/

CSS中的两列布局，不使用表格

3 个答案: