HTML/CSS 布局 float ？

Question

我正在尝试布局最初需要看起来像的东西:

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

我正在尝试将所有内容放入 div 容器中，然后为以下内容创建其他 div:

• 主广场，
• 底部的矩形，
• 然后在需要时包含 2 个其他 div(2 个正方形)的 div。

当这两个正方形不存在时，主正方形和底部矩形必须占据容器的整个宽度。

我试过向左浮动包含 2 个正方形和其他一些东西的 div，但我失败了。

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>

CSS 看起来像:

#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() #videos 元素。

fiddle :http://jsfiddle.net/67WLG/1/

Answer 1

我在jsfiddle中做了这个例子

试试这个 link

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

HTML:

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