一切!我是html和css的初学者,我尝试创建块,它由三部分组成:顶部,内容,底部。顶部和底部是一些带圆角的图片。第三部分 - “内容”有颜色背景,会有一些信息。我尝试用标签div和css样式以多种方式做到这一点。
<style type="text/css">
#top{margin-top: 50px;background:url(background/bg_content_top.gif) no-repeat;width: 851px;text-indent: -900%;}
#middle{background:#FFF; border-left: solid 2px #000; border-right: solid 2px #000;width: 851px;}
#bottom{background:url(background/bg_content_bottom.gif) no-repeat; text-indent: -900%; width: 851px;}
</style>
<body>
<div id="top">top div</div>
<div id="middle">text will be here</div>
<div id="bottom"> bottom div</div>
</body>
问题是:如果我使用
<p>text will be here</p>
div之间会有奇数字符串。 另一个尝试:
#top{position: absolute; margin-top: 50px; background:url(background/bg_content_top.gif)no-repeat; width: 851px;}
#middle{position: relative; margin-top: 16px; background:#FFF; border-left: solid 2px #000; border-right: solid 2px #000;}
#bottom{background:url(background/bg_content_bottom.gif) no-repeat bottom;text-indent: -900%;}
<body>
<div id="top">
<div id="middle">
<p>text will be here</p>
<div id="bottom">lower div</div>
</div></div>
</body>
另一个问题,背景中间div画在底部图片的透明角落。 帮助PLZ,我该怎样才能以正确的方式做到这一点?
答案 0 :(得分:2)
行中三个div的问题是margin collapsing。如果块中的最后一个元素具有底部边距,则此边距可以移出其父元素,并且可能与下一个静态定位元素的上边距结合,或者最终在它们之间结束。
避免它的简单方法就是避免使用垂直边距。如果您可以使用填充,那么不会崩溃,这使布局更容易。或者,您可以通过在父级的边缘上放置填充或边框来设置边距不会折叠的实体障碍。即使padding: 1px 0
足以阻止任何崩溃。
嵌套背景也可以工作,将所有div嵌套在一起:
<div class="box0"><div class="box1"><div class="box2">
content here
</div></div></div>
然而,你需要冒犯背景区域以阻止一个背景覆盖另一个背景。例如,顶部和底部图像高50px:
.box0 { background: url(box/top.gif) top center repeat-x; padding-top: 50px; }
.box1 { background: url(box/bottom.gif) bottom center repeat-x; padding-bottom: 50px; }
.box2 { background: url(box/middle.gif) center center; }