具有定位和調整問題

Question

我有我的網頁（http://jsfiddle.net/NeonGuilmon/pghtZ/5/）

我試圖創建一個聊天室界面的一個佈局的麻煩，隨着部分room左上角的屏幕寬度和高度爲（100％ - 200px），左上角爲50％，寬度爲200px，寬度爲users，底部左側爲friends，右下角爲012px和chat-bar，寬度爲200px高度和寬度（100％-200px）。

正如你從我的小提琴中看到的，我非常糟糕，我不知道下一步該去哪裏。誰能幫我這個？

Answer 1

解決我的問題裏面：我不知道CSS calc得到了廣泛的支持：http://caniuse.com/#search=calc

Answer 2

我真的建議閱讀以下兩個鏈接： http://www.w3.org/TR/CSS2/visuren.html http://www.w3.org/TR/CSS2/box.html

正確理解位置/顯示工作和利潤率之間的區別的/ etc如何是關鍵。

您目前正在使用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>