0

私はいつもCSSレイアウトに問題があるようです。ページ上に「div」要素を配置するのに最適なものは何ですか。たとえば、私は以下を作成しました：

私のjsfiddleを参照してください：http：//jsfiddle.net/JJw7c/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example</title>
</head>
<body>
    <div class="container">
        <div class="header">
            this is the header
            <div class="menu">
                menu goes here
            </div>
        </div>
        <div class="main">
            main content goes here
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>

body
{
    margin:10px;
}
.container
{
    border:1px solid black;
    min-height:400px;
    width:100%;
}

.header
{
    border:1px solid red;
    height:100px;
}

.menu
{
    border:1px solid green;
    height:20px;
    width:50%;
    float:right;
}

.main
{
    border:1px solid grey;
    min-height:100px;
    margin:20px;
}

.footer
{
    border:1px solid green;
    width:100%;
    padding-top:10px;
}

ヘッダーの右下にアイコンを配置したいが、具体的にしたいとします。

相対位置を使用してからtop：20pxなどを使用しますか、それともposition：absoluteを使用しますか？または、margin-right：200pxを使用しますか？または、フロートを使用してから絶対位置に配置できますか？<<<これらをいつ使用するか説明してください。可能であれば、各例でjsfiddleを更新してください。

ありがとう

4

2 に答える 2

3

使用する

position:absolute;
bottom:0px;
right:0px;

iconクラスに追加position:relative;し、.headerに追加します

于 2012-05-15T08:31:18.020 に答える
2

要素に位置absolute + relative
割り当てposition: relativeを使用してから、.headerを使用してアイコンを追加できます。アイコンにposition: absolute適用さtopれleftたプロパティは、要素に関して参照されますheader（アイコンの最初の非静的要素の親であるため）

この手法の主な利点は、アイコンの存在がヘッダー内の他の要素の位置にまったく影響を与えないことです（絶対位置にあるため）

于 2012-05-15T08:28:42.863 に答える