Question

我想把两个div放在一起。第一个显示为表，另一个是内联div。以下是一些代码：http://jsfiddle.net/WcHEc/

还有内联代码。

HTML：

<div class="message-container">
    <div class="img-rounded small">
        <div class="img-centered-wrapper">
            <img src="/static/img/avatar" class="img-animal" />
        </div>
    </div>
    <div class="message-content">
        <p><strong>Some title</strong></p>
        <p>Some content</p>
    </div>
</div>

CSS：

.message-container {
    clear: both;
    display: inline-block;
}
.message-container .right {
    float: right;
    text-align: right;
}
.img-rounded {
    border: 1px solid #000;
    border-radius: 7px;
    display: table;
    float: left;
    height: 50px;
    width: 50px;
    margin-right: 15px;
    overflow: hidden;
}
.img-centered-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.message-content {
    display: inline-block;
    float: right;
}
.img-animal {
    max-height: 45px;
    max-width: 45px;
}

我希望div“message-content”总是显示在div“img-rounded”的右边。但是当“消息内容”中的内容太多时，它会显示在下面。我已经挣扎了一段时间，并且不知道如何让它发挥作用。我很乐意提供任何帮助。

修改

谢谢你的答案！它帮助我弄清楚问题是什么。

我没有设置宽度和高度，因为我的想法是.message-container适合其内容，因为我正在使用边框。

因此，我不是设置inline和固定宽度，而是将其显示为inline-block，并将max-width设置为.message-content。这是一段更大的代码：http://jsfiddle.net/RpZcT/。

您是否知道如何使用inline代替inline-block来达到同样的效果？如上所述，inline-block可能会导致意外行为。

Answer 1

您需要设置.message content的宽度：

.message-content {
    display: inline;
    float: right;
    width: 300px;
}

所以它会是这样的http://jsfiddle.net/WcHEc/1/

Answer 2

我会将.message-container设置为包装器。这将为您以后节省一些麻烦。同时将divs设置为float:left;。这将使它们保持一致。

.message-container {
    clear: both;
    display: inline;
    width: 960px;
    height: auto;
}

注意 1）最好在width上指定divs，否则width将是自动或继承的，这可能会有问题。 2）在某些浏览器中使用display: inline-block;可能会导致意外行为，因此我只会使用display: inline;。

查看示例here

放置到表格div和内联块div彼此相邻

2 个答案: