如何使div显示两个伸展宽度的内嵌项？

Question

我很难解释，所以我从一张图片开始：

我正在使用WebRTC为一个视频聊天服务器工作。服务器部分不是困难的部分，它使一切都很美。我想要做的是，如果可能的话，制作一个包含聊天的可滚动div标签，并在其右边放置本地视频流。

以下是添加本地视频流的代码。

    var onLocalStream = function (stream) {
        $("#chatArea").css({ right: ($(window).width()) - 175 })

        var video = $("<video>").attr({
            autoplay: "autoplay", id: stream.id, height: "150px", width: "170px", float: "right", display: "inline"

        }).bind("click", { streamId: stream.id }, function (args) {
            RTCConnection.removeStream(args.data.streamId, function (id) {
                console.log("Local stream removed", id);
            });
            $(this).remove();
        }).appendTo("#ChatAndVideo");
        attachMediaStream($(video).get(0), stream);
    };

这将绑定到稍后生成的RTCConnection。我的尝试是将chatArea缩小到足以使视频适合它的右侧。 click事件实际上仅用于测试，稍后将被删除。

现在这里是我试图追加的区域的HTML。

<div id="ChatAndVideo">
    <div id="chatArea" style="width: auto; height: 100px; overflow: auto; overflow-y: scroll; outline-color:black; outline:auto">
        <p id="chat"></p>
    </div>
</div>

最终我确实计划清理一些并将CSS放在一个单独的文件中，但我不想担心它直到它工作。

这个问题可能已经以某种方式得到了回答，但我并不确定如何搜索它。我对HTML，CSS和JavaScript的一点点了解都是自学的，所以感谢您提前获得任何反馈！

Answer 1

您肯定希望清理/简化标记。这是一个建议：

<style>
.half {
  border: 1px solid;
  height: 200px;
  display: inline-block;
  width: 40%;
  padding: 2.5%;
  box-sizing: border-box;
}
.half:first-of-type {
    overflow: scroll;
}
.container {
  display: inline-block;
  width: 100%;
}
</style>

<div class="container">
    <div class="half">
        <div id="chat">

        </div>
    <div class="half">
        <div id="video">

        </div>
    </div>    
</div>

然后，我建议您使用脚本专门针对聊天/视频供稿的div。这简化了您的脚本并使其更有意义。此外，总是尽量避免通过Javascript / jQuery执行css样式 - 处理这种情况的最佳方法是将类分配给包含要应用的CSS的元素。

希望这会有所帮助。