Question

小而简单的问题。我得到了这些CSS规则。

html {
    background-image:url('../images/background1.jpg');
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    border:  3px solid rgb(75,75,75);
    box-shadow: 0 0 15px 5px rgba(40,80,100,.75);
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomrightt: 10px;
    border-bottom-right-radius: 10px;
    background:url('../images/background4.jpg');
    background-size: cover;
    min-height: 900px;
    height:auto;
}

现在我只想添加侧面，而不是身体，但相对定位的广告盒...我该怎么做？提前谢谢

Answer 1

如果你想要额外的内容到身体的两侧，你需要做的是指定3个<div>元素，每个元素设置为页面的宽度（如果你想要广告的每一面您可以使用css width属性为主要区域设置每个div的百分比，或者如果您想要精确测量，可以设置为像素。

将第二个“中间”div作为您的新“身体”，您将拥有自己的内容。

这有意义吗？

Answer 2

你必须拥有身体的一切。如果你想要实现一个3列结构，其中间是身体当前的身体，2个位置，你可以做类似的事情。

<div id="wrapper">
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</div>

并在您的CSS替换正文中使用#main添加另外2个属性float: left; width: 70%

还为其他元素添加css属性

#wrapper {width: 100%;}
#left {width: 15%; float: left;}
#right {width: 15%;float:left;}

Answer 3

以下是我认为您希望它使用html和css

的示例

http://jsfiddle.net/Hive7/tzeTQ/1/

CSS位置元素

3 个答案: