Question

我有2个水平内联块div。母液体100％宽度：

右div宽度应等于内部元素宽度。因此，如果内部元素是文本，则右边的div的宽度应该等于其中最长的raw。如果它不能超过ex，那将是很好的。 300像素。
无论它包含什么，左边的div应该释放剩余的（剩余的）宽度。我在左边div中有垂直滚动，所以它应该留在左边div的右边缘，右边div的内部元素应该在它之后开始。有没有办法只用css存档？也许我应该使用表而不是div？

<style>
    .wrapper {
        height: 100%;
        width: 100%;
    }
    .chat-wrapper {
        display: inline-block;
        height: calc(100% - 25px);
        width: 100%;
    }
    #chatbox {
        height: 100%;
        overflow-y: scroll;
        float: left;
        word-wrap: break-word;
    }
</style>
<div class="wrapper">
    <div class="chat-wrapper">
        <div id="chatbox">
            This div should fluid<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
        </div>
        <div> First row<br> Second row<br>This raw is longest = right div width<br><br> But less than 200px</div>
    </div>
</div>

Answer 1

基本上，您需要使用固定宽度浮动div。在您的情况下，翻转文本元素的顺序并float:right第一个文本div，并设置max-width以限制大小。请参阅here。

Answer 2

仅限CSS

如果您无法编辑HTML，则只能编辑CSS。

将元素显示为表格和表格单元格：http://jsfiddle.net/usgzhv6k/

.chat-wrapper {         
    display: table;
}
.chat-wrapper > div:nth-child(2) {
    display: table-cell;
    background-color: red;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chatbox {
    width: 100%;
    background-color: green;
    overflow-y: scroll;
    word-wrap: break-word;
}
.create-message-wrapper {
    background-color: cyan;
    width: 100%;
    display: table-row;
}

2个div在行，right的宽度=内容，左流体

2 个答案:

仅限CSS