Question

我的某个页面（http://jsfiddle.net/NeonGuilmon/pghtZ/5/）

的布局有问题

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

从你的小提琴中可以看出，我搞得很糟糕，我不知道下一步该去哪里。任何人都可以帮我这个吗？

Answer 1

我真的建议阅读以下两个链接： 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>

Answer 2

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

定位和调整大小的问题

2 个答案: