0

シンプルな HTML を作成したい。3 つの div を作成したい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
    <title>My Site</title>
</head>
<body>
    <div id="top_left">
        &nbsp;
    </div>
    <div id="top_center">
        &nbsp;
    </div>
    <div id="top_right">
        &nbsp;
    </div>
</body>
</html>

中央の div は固定サイズで、常に中央にあります。しかし、最初と 3 番目の div はダイナミクスです。これを作る方法。

CSS

#top_left {
    background-image: url(images/pikacom_01.gif);
    background-repeat: repeat-x;    
    background-position: left;
    height: 85px;
}

#top_center {
    background-image: url(images/pikacom_02.gif);
    background-repeat: no-repeat;
    background-position: center;    
    width: 1024px;
    margin: 0 auto;
    height: 85px;
}

#top_right {
    background-image: url(images/pikacom_03.gif);
    background-repeat: repeat-x;
    background-position: right; 
}
4

2 に答える 2

2 
<style type="text/css">
.left {float:left;}
.center {width:1024px;margin:0 auto;}
.right {float:right;}
</style>
<div class="right"></div>
<div class="left"></div>
<div class="center"></div>
于 2012-06-04T07:48:18.967 に答える
1

秘訣は、左と右の列に50％の幅、左または右のフロート、および左または右にそれぞれ負のマージンを与えることです。負のマージンは、中央の列の幅の半分である必要があります。したがって、この場合は-512pxです。

次に、左右の列の内側にコンテンツdivを追加し、同じ値（512px）の正のマージンを与えます。

それだけです、私のデモを見てください。html要素の順序が変更されていることに注意してください（中央が最後になります）。さらに、デモセンターでは、divの幅は説明のためにわずか300pxです。

#top_left {
    background: #00f; // background-colors only added for illustration purposes
    background-image: url(images/pikacom_01.gif);
    background-repeat: repeat-x;    
    background-position: left;
    height: 85px;
    float: left;
    width: 50%;
    margin-left: -512px;
}
#top_left_content {
  margin-left: 512px;
}

#top_center {
    background: #f0f;
    background-image: url(images/pikacom_02.gif);
    background-repeat: no-repeat;
    background-position: center;    
    width: 1024px;
    margin: 0 auto;
    height: 85px;
}

#top_right {
    background: #ff0;
    background-image: url(images/pikacom_03.gif);
    background-repeat: repeat-x;
    background-position: right; 
    height: 85px;
    float: right;
    width: 50%;
    margin-right: -512px;
}
#top_right_content {
  margin-right: 512px;
}

</ p>

于 2012-06-04T07:51:59.910 に答える