Question

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

我想要一个带有用户/日期信息的div，另一个带有文本的div（如果长度超过div宽度则应该换成新行）和另一个带有链接的div。

你怎么看，第一行没有问题（正确）。第二个，将div设为“阻塞”......似乎忽略了浮动。

有帮助吗？

修改

以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

您的内容div wallArea1小于内容wallUser和wallMess，因此wallMess会被推送到下一行。如果您增加wallArea1及其包含div wallArea的宽度，则不会发生这种情况。

Answer 2

更新了代码

.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。我基本上允许两列（用户和乱码区域）自动调整大小。这应该是你正在寻找的。

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

2 个答案: