如何解决固定中心div,由可变宽度div包围,由固定角div包围
| 我想在页面上放置如下所示的栏: [corner-l] [变量] [装饰品] [variable] [corner-r] \“可变\”间隔部件应可调整大小,但最终,周围的容器(包含所有容器)应规定最大宽度,并且上述设置应将两个间隔均等地拉伸(而不必声明显式宽度)垫片),将“装饰品”留在中间。 所有部分的高度完全相等,均为260像素。所有这些div都包含该图像作为背景图像。 \“ variable \”部分包含一条1px宽的条形纤维(同样,作为背景图像,设置了repeat-x)。 我可以这样做,也许支持主要的浏览器吗?最好的方法是什么?解决方法
我可以这样做,也许可以支持
主要浏览器?
我的答案将适用于所有现代/主流浏览器,但IE7除外。我不确定您是否会考虑使用主流浏览器;如今这是边界。
请参阅:http://jsfiddle.net/PyTAD/(并调整浏览器的大小以测试流动性)
CSS:
.barContainer {
border: 2px dashed #000;
width: 100%;
display: table;
table-layout: fixed
}
.barContainer > div {
outline: 1px dashed #00f;
display: table-cell;
height: 260px
}
.corner-l,.corner-r {
width: 50px;
background: #ccc
}
.variable {
background: #999
}
.ornament {
background: #f0f;
width: 100px
}
HTML:
<div class=\"barContainer\">
<div class=\"corner-l\">1</div>
<div class=\"variable\">2</div>
<div class=\"ornament\">3</div>
<div class=\"variable\">4</div>
<div class=\"corner-r\">5</div>
</div>
,这会将装饰物保留在页面的中央。宽度将由标题导航宽度决定
,看到这个
http://jsfiddle.net/7MnKj/1/
您可以在.vary
中更改宽度并查看
那是你想要的吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。