0

ページのレイアウトに問題があります ( http://jsfiddle.net/NeonGuilmon/pghtZ/5/ )

room画面の左上にセクションがあり、幅と高さが (100% - 200px)、users左上にセクションがあり、高さが 50%で幅が 200pxのセクションで、チャットルームのインターフェイスを作成しようとしています。friends左下は同じサイズの adusersでchat-bar、右下は高さ 200 ピクセル、幅 (100% - 200 ピクセル) です。

私のフィドルからわかるように、私はかなりひどく失敗しました。次にどこに行けばいいのかわかりません。誰でもこれで私を助けることができますか？

4

2 に答える 2

0

次の 2 つのリンクを読むことを強くお勧めします: 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

calc問題を解決しました: CSSがこれほど広くサポートされているとは知りませんでした: http://caniuse.com/#search=calc

于 2013-11-02T21:35:22.063 に答える