Css 定位和调整大小的问题

我的一页的布局有问题（）

我正在尝试创建一个聊天室的界面，在屏幕的左上角有一个

room

，宽度和高度分别为100%-200px，左上角有一个

users

，宽度分别为50%和200px，左下角有一个

friends

，尺寸与广告

users

相同，和右下角的聊天栏，高200像素，宽100%-200像素

---

正如你从我的小提琴上看到的，我把事情搞砸了，不知道下一步该怎么办。有人能帮我吗？

我真的建议阅读以下两个链接：

正确理解位置/显示的工作原理以及边距/等之间的差异是关键

您当前正在使用显示：块。这基本上意味着每个元素将被放置在下一个元素下

你用的是右边距。这将在元素的右侧强制使用白色边距，并且不允许在该空间中放置任何内容

最后，如果您想使用一个表并排对齐4个块元素，可以缓解很多问题（但不要过分使用表）

因此，最简单的设置方法是：（我将布局放在html上，但您可以将其放在css中。同时删除您当前在分区上的所有位置和高度提示。它们应该占据表格单元格中的所有空间

<table height="100%" border=1> 
  <tr height=50%>
    <td width=100%><section id="room">room</section></td>
    <td width=200px><section id="users">users</section></td> 
  </tr>
  <tr height=50%>
    <td><section id="friends">friends</section></td>
    <td><section id="chat-bar">chatbar</section></td>
  </tr> 
</table>

房间
使用者
朋友
聊天室

解决了我的问题：我没有意识到CSS

calc

得到了如此广泛的支持：

你的

room

不是100%-200px，而是100%+200px（右边距：200px）。