如何使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的元素。

希望这可以帮助。