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>

center div 是固定大小的，总是在中间。但第一个和第三个 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 回答