我正在使用Foundation框架,我想制作一个占用网格类宽度100%的导航。
我有3个div:.header_beg
,.header_rep
,.header_end
.header_beg
为2px width
,float: left
,.header_end
也是
但我希望header_rep
宽度为1px,并且要repeat-x
,直到它填满100%的网格类。但它也需要它float: left
,但float: left
它不可见。我没有设置宽度,因为我希望它是网格类的100%。
background: red;
height: 49px;
margin-left: 2px;
这是一个小提琴:http://jsfiddle.net/WFVER/
我需要绿色divs
位于红色的开头和末尾,同时3 divs
为网格类的100%宽度。
答案 0 :(得分:1)
您可以使用浮点数执行此操作,但不是通过浮点数执行此操作,我将向您展示如何使用绝对位置执行此操作:
HTML
<div class="header">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
.header {
width: 1000px;
height: 20px;
position: relative;
}
.header .left {
width: 1px;
left: 0;
height: 20px;
}
.header .right {
width: 1px;
right: 0;
height: 20px;
}
.header .middle {
width: 998px;
background: url(images.png) repeat-x;
left: 1px;
right: 1px;
height: 20px;
}