css - 如何创建一个两列的 div 布局，其中每列可以具有可变宽度

Question

我认为最好的方法是向我们展示一个 example :

我想要一个带有用户/日期信息的 div，另一个带有文本的 div(如果它比 div 宽度长，应该换行)和另一个带有链接的 div。

如你所见，第一行没有问题(它是正确的)。第二个，将 div 作为“ block ”...似乎忽略了 float 。

有什么帮助吗？

编辑

以jsfiddler为例，输出应该是这样的:

04-03-2011 - userA - Hello My name is John and I really like this website                               X 
02-04-2010 - userA-RealGoodUser -  This text should be at the right of the userA-RealGoodUser, but      X
                                   in fact it doesnt. Why this behaviour?                               

Answer 1

也更新了代码

.wallArea {
    width: 700px;
    float: left;
    margin-left: 5px;
    color: #000000;
    float: left;
}

.wallArea1 {
    width: 670px;
    float: left;
    color: #000000;
    float: left;
    padding-right: 10px;
}

.wallArea2 {
    width: 20px;
    float: left;
    color: #000000;
    float: left;
    padding-top: 2px;
}

.wallUser {
    width: auto;
    float: left;
    font-family: comic sans ms;
    font-style: oblique;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
}

.wallMess {
    width: auto;
    overflow: hidden;
    font-family: comic sans ms;
    color: #000000;
    font-size: 12px;
    font-weight: normal;
}

根据示例更新

查看here .我基本上允许两列(用户和困惑区域)自动调整大小。这应该是您正在寻找的。