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

我认为最好的方式是向我们展示：

我想要一个包含用户/日期信息的div，另一个包含文本的div（如果它比div宽度长，则应该放在新行中）和另一个包含链接的div

您看，第一行没有问题（正确）。第二个，将div设置为“block”。。。似乎浮动被忽略了

有什么帮助吗

编辑

以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?                               

---

您的包含div

wallrea1

小于内容

wallUser

和

wallmesss

因此

wallmesss

被推到下一行。如果您增加

wallArea1

的宽度及其包含的div

wallArea

，则不会发生这种情况。

同时更新代码

.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;
}

根据示例进行更新

---

看到了。我基本上允许两个列（用户区域和混乱区域）自动调整大小。这应该是你要找的。

嗯，是的，但我需要一种dinamic宽度，这就是为什么我在walluser和wallMess上放置了宽度：auto…这只是使包含文本的div的宽度自动。包含这些div的框的大小不是自动的，并且需要足够宽以处理文本，否则它将被包装。如果您希望它适合并且是动态的，请将

wallArea1

宽度更改为

auto

wallArea

，则

wallArea1

周围的div将成为约束div，所以你也需要调整一下。@markzzz-我更新了我的答案。这两列应根据文本量自动调整大小。让我知道这是否适用于您。新行上的文本是否要位于用户/日期下方？或者是与第一行的起始点对齐？例如，可能会更清楚：）如果您要设置

wallmesss

的宽度，您将得到您想要的包装。我还希望wallmesss是自动的：）