我很难解释,因此我将从图片开始:

在此处输入图片说明

我正在使用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的了解很少,都是自学的,因此在此感谢您的反馈!

===============>>#1 票数:0 已采纳

您肯定要清理/简化标记。 这是一个建议:

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

希望这可以帮助。

  ask by MidgetToaster translate from so

未解决问题?本站智能推荐:

1回复

在并排对齐的多个div中隐藏和显示div

我正在处理onclick事件。 我希望每个单元格中都有许多onclick事件,并且我希望div的大小相等(无论数字如何),这意味着显示的文字为AND并且不是全屏显示,而是保持在边框的宽度之内,最重要的是,我想知道如何一次只打开一次单击事件。 例如,如果用户单击第一个,则我不希望第二个打开。
1回复

无法将div与%宽度或高度正确对齐?

我在正确对齐页面上的元素时遇到问题。 我在这里有一个直播示例。.http://newbapps.com/8ball/ div“答案”应叠加在img“球”中的三角​​形上。 问题是,即使窗口大小不同,我也希望它居中显示。 如果我在图像和div上使用像素宽度/高度值,则更容易实现,但是由
3回复

在100%宽度容器内居中div,左右浮动宽度

我想在容器div中对齐3个div,如下所示: [[左] [中] [右]] 容器div的宽度为100%(无固定宽度),调整容器大小后,居中div应保持居中。 左DIV和右DIV没有固定宽度,需要与容器一起扩展/收缩。 中心DIV确实具有固定的宽度。 我有这个: 问
2回复

HTML-如何使这些div保持一行? [重复]

这个问题已经在这里有了答案: 如何在另一个div内对齐3个div(左/中/右)? 18个答案 如何使用CSS并排浮动3个div? 15个答案 同一行中不同宽度的div 3个答案 扩展div来填充剩余宽度 21个答案 我想在一行中全部
2回复

在图像和标尺之间对齐两个项目

我有一个徽标可以正确显示,我想在其下方显示Google翻译下拉菜单,然后在其旁边有20像素间距的菜单显示在同一行。 然后在这两项下面显示一个水平分隔线。 正文应显示在分隔符下方。 不过,我有麻烦的谷歌翻译下的标志,并与他们之间的一些空间,旁边的菜单显示显示: 水平线显示在这两
1回复

内联文本复选框-JS问题?

我目前正在学习如何编程,并且一直试图完成表单的设计。 我已经看过所有先前的问题,但是所有的解决方案似乎都不起作用:S。 以下是我要修复的两件事: 更改下拉菜单的文本颜色和边框。 对齐复选框和标签,使它们在同一行上。 可以在这里查看代码: http : //codep
1回复

在父DIV中垂直对齐单个DIV(img)

我正在使用引导程序,并试图在包含div的中间获取img并停留在右侧。 容器是不固定的,会随着页面的宽度而变化。 我已经四处张望,无法使用CSS或JS解决问题。 我已经尝试过转换和表对齐,但是我什么都无法工作。 对于新手问题,我为此付出了数小时的歉意。 例
5回复

如何垂直对齐一行中的两个元素的中心?

这是一个棘手的情况,所以我无法在标题中正确解释。 但我试过了。 请看这个小提琴: http : //jsfiddle.net/yCjnz/ HTML: CSS: 有两个元素,我希望它们看起来像这样: 这样一个元素的中心将与另一个元素的中心对齐。 我不能使用
2回复

水平和垂直对齐DIV

我正在寻找一种方法来设置一个基本的2列博客类型布局,它允许div水平内联,但也可以直接位于上面的div下面。 我试过显示:内联和浮动div,仍然无法让它工作得很好。 我不确定这是否可以单独使用CSS,但是希望如此 请检查下面的链接,看看我的意思,因为我很确定我没有尽可能地解释它。
1回复

在div中以圆形背景图像居中放置大文本

我有一个图像地图,显示带圆圈背景图像的特定div。 在此div中,它显示了一堆文本。 但是由于背景是圆形的,因此我希望将文本对齐为相同大小的圆圈。 有办法吗? 基本上,我想要的是将大块文本对齐成一个圆圈。 像这样,但带有更大的文字。 http://jsfiddle.net/d