使用CSS / Divs实现两列表格外观

Question

我需要一个两列表格，左栏中有一个单词（例如姓名，传记），右栏中有每个单词的详细信息。我试过了：

<div id="container">
<div id="left_column">......</div>
<div id="right_column">......</div>

</div>

如果右列只有一个或两个单词，这看起来很好，但是对于较长的条目，例如'bio'，第二个div的信息会在left_column div下面蛇。

在没有发生这种情况的情况下，实现两列的最简单方法是什么？

Answer 1

你需要浮动它们，并设置一些宽度。

#container {
    width:100%;
}
#left_column {
    float:left;
    width:20%;
}
#right_column {
    float:left;
    width:80%;
}

注意：如果你只浮动它们，并且没有设置宽度，当浏览器窗口变窄时，它们仍会互相蜿蜒。

Answer 2

使用CSS属性使其成为浮动元素并显示：inline-block不适用于所有浏览器。

float:left;

你也可以<span>默认情况下不会换行。