我正在尝试为 WP 模板创建此设计: http://minus.com/lbi1iH25EcKsu7
现在我是这样的:http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
我想你可以大致了解 ;)
我知道...这是我的错:浏览器从左到右计算窗口的大小,所以如果我设置边距,它会将尺寸为 100% 的 div 移动到 de对。
但问题是:我不知道如何让它工作 :(.
我想用 div 制作“黑条”(我用红色和橙色绘制了那些不起作用)并且这个技巧奏效了......但只有左边的像我想要的那样工作。
我快没脑子了。我尝试了所有我能想到的,但没有任何效果。 也许你能帮我? ;)
这是html代码:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
这是 css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
最佳答案
右边的 div 扩展到窗口宽度的 50%。对于条形延伸到窗口长度然后切断的液体布局,您通常会制作一个底层 div(在本例中为条形和黑色图案背景),然后将其扩展到窗口的 100%。您不能仅使用 CSS(尤其是绝对定位)使用百分比(左 div + 固定中间图像 + 右 div)等相对长度来制作附加布局。如果你坚持使用这个,你将不得不在内容居中后 overflow: hidden;
html {}
或 body {}
标签那只是不好的做法。我建议只让两个长 div 在您的 sprite 图像下一直穿过屏幕。
关于html - div,不触发水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11877365/