Javascript 如何使div显示两个延伸宽度的内联项？

我很难解释，所以我先从一幅图开始：

我正在使用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);
    };

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

    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);
    };

var onLocalStream=函数（流）{
$（“#chatArea”）.css（{右：（$（window.width（））-175}）
var video=$（“”）.attr({
自动播放：“自动播放”，id:stream.id，高度：“150px”，宽度：“170px”，浮动：“右”，显示：“内联”
}).bind（“单击”{streamId:stream.id}，函数（args）{
RTCConnection.removeStream（args.data.streamId，函数（id）{
日志（“本地流已删除”，id）；
});
$（this.remove（）；
}).附于（“#聊天和视频”）；
attachMediaStream（$（视频）.get（0），流）；
};

这将绑定到稍后建立的RTCC连接。我的尝试是将聊天区域缩小到足以将视频放在它的右边。单击事件实际上只是为了测试，稍后将被删除

下面是我试图附加到的区域的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所知甚少，都是自学成才的，所以非常感谢您的反馈

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

<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>

.一半{
边框：1px实心；
高度：200px；
显示：内联块；
宽度：40%；
填充：2.5%；
框大小：边框框；
}
.一半：第一种{
溢出：滚动；
}
.集装箱{
显示：内联块；
宽度：100%；
}

然后，我建议您使用脚本专门针对聊天/视频源的div。这简化了您的脚本，并且更有意义。另外，请始终避免通过Javascript/jQuery执行css样式，最好的处理方法是为包含要应用的css的元素分配一个类

---

希望这有帮助

谢谢你，伊恩！这个方法对我很有效，只是用了稍微不同的数字来得到我想要的尺码。