1

我想将两个 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-content”中的内容过多时，它会显示在下面。我为此苦苦挣扎了一段时间，不知道如何使它工作。我很高兴得到任何帮助。

编辑

谢谢你的回答！它帮助我找出问题所在。

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

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

您知道如何使用 usinginline而不是来达到相同的效果inline-block吗？如前所述，inline-block可能会导致意外行为。

4

2 回答 2

1

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

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

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

于 2012-11-18T19:50:57.540 回答
1

我将设置.message-container为包装器。这将在以后为您省去一些麻烦。将两者都设置divs为float:left;。这也将使它们保持一致。

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

注意width1) 在上 指定是个好主意divs，否则width将自动或继承，这可能会出现问题。2）display: inline-block;在某些浏览器中使用可能会导致意外行为，所以我只会使用display: inline;。

看看这里的例子

于 2012-11-18T20:06:58.817 回答