0

我的一个页面的布局有问题（http://jsfiddle.net/NeonGuilmon/pghtZ/5/）

我正在尝试创建聊天室的界面，room屏幕左上角的部分，宽度和高度（100％ - 200px），users左上角的部分，50％的高度和200px的宽度，部分friends在左下角，广告尺寸相同users，chat-bar在右下角，高度为 200 像素，宽度为 (100% - 200 像素)。

正如你从我的小提琴中看到的那样，我搞砸了，我不知道下一步该去哪里。谁能帮我这个？

4

2 回答 2

0

我真的推荐阅读以下两个链接： http ://www.w3.org/TR/CSS2/visuren.html http://www.w3.org/TR/CSS2/box.html

正确理解仓位/显示的工作原理以及保证金/等之间的区别是关键。

您当前正在使用 display:block。这基本上意味着每个元素将被放置在下一个元素之下。

您正在使用右边距。这将强制元素右侧有一个白色边距，并且不允许任何东西坐在该空间中

最后，如果您想使用表格并排对齐 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>
于 2013-11-02T19:38:10.743 回答
0

解决了我的问题：我没有意识到 CSScalc得到如此广泛的支持：http ://caniuse.com/#search=calc

于 2013-11-02T21:35:22.063 回答