html - 2 个 div，右边的宽度 = 内容，左边的流体

Question

我有 2 个水平内联 block div。父 div 流体 100% 宽度:

• 右侧的 div 宽度应等于内部元素的宽度。因此，如果内部元素是文本，则右侧 div 的宽度应等于其中最长的 raw。同样，如果它不能超过 ex，那就太好了。 300 像素。
• 左边的 div 应该流动剩余的(剩余的)宽度，不管它包含什么。我在左边的 div 中有垂直滚动，所以它应该留在左边的 div 的右边缘，而右边的 div 的内部元素应该在它之后开始。有什么办法可以只用 css 存档吗？也许我应该使用表格而不是 div？

查看 the sketch

<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

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