HTML/CSS布局浮动？

我正在尝试布局一些最初需要如下所示的内容：

然后，我需要通过jQuery添加2个div，使其看起来像：

我正在尝试将所有内容放入

div

容器中，然后为以下内容创建其他div：

• 主广场
• 底部的矩形
• 然后，当需要一个包含2个其他div（2个正方形）的div时

如果没有两个正方形，则主正方形和底部矩形必须占据容器的整个宽度

我尝试过在

div

中左浮动，其中包含2个正方形和其他一些东西，但失败了

HTML看起来像：

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>
    <div id="chatMessagesWindow"></div>
    <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
</div>

#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 70%;
  height: 100%;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: right;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video {
  border: 1px solid black;
}

在JavaScript中，我显示

.show（）

视频

元素

小提琴：也许这对你有帮助

html:

js（带jQuery）：

$（函数（）{
var STR=“这是左上框！这是左下框！”；
变量$pageW=$（'.pagewrap'）；
$pageW.前置页（STR）；
});
这听起来像是一项工作：HTML表格的所有便捷布局功能都没有任何内容污染！或者至少是最低限度的污染。我确实需要添加一个div作为聊天信息和聊天输入元素的容器：

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>
    <div id="chatContainer">
        <div id="chatMessagesWindow"></div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>

videos div可以用以下语法隐藏在JavaScript中：
.style.display=“none”
并用
.style.display=“table cell”
显示，其中当然是videos div

视频元素本身可能仍然需要一些定位工作，而其他一些元素也可能需要调整大小。
我在JSFIDLE中做了这个示例

试试这个

JS:

$('#container').on('click', function () {
    $('#videos').show();
});

CSS:

#right_blk {  width:auto;display:table; }
#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 98%;
  height: 562px;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: left;
  display:table;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video { width:99.1%;
  border: 1px solid black;
}

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>

    <div id="right_blk">
    <div id="chatMessagesWindow">
     asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd 
        </div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>

HTML:

#right_blk {  width:auto;display:table; }
#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 98%;
  height: 562px;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: left;
  display:table;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video { width:99.1%;
  border: 1px solid black;
}

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>

    <div id="right_blk">
    <div id="chatMessagesWindow">
     asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd 
        </div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>




asdad asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd
在我自己的场景中，首先，我将创建一个
全局包装器
，其宽度为
850px

它将包含
#视频
（默认情况下-
显示：无；
）和聊天
#容器
，该容器将向左浮动并继承
全局包装的宽度

在容器的
上单击（）

将
#videos
的宽度设置为1/3（例如）和
float:left
将
#容器
的宽度设置为剩余的2/3，并将其向左浮动
在
#videos
不要使用jQuery的
css（）
方法，而是使用预定义的css类并动态添加它们。
您能给我们展示一些HTML和javascript吗？另外，你是否需要添加左边的两个框，或者它们可以隐藏然后显示？只需输入我得到的内容。请使用实际的HTML而不是伪代码，也请允许我向你介绍：如果你想设置你迄今为止所做的演示。嗨，我尝试过，但没有成功。你能看看小提琴吗？谢谢
#right_blk {  width:auto;display:table; }
#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 98%;
  height: 562px;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: left;
  display:table;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video { width:99.1%;
  border: 1px solid black;
}

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>

    <div id="right_blk">
    <div id="chatMessagesWindow">
     asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd 
        </div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>