浮动div 100%宽度

时间:2012-12-28 12:08:45

标签: css html width repeat zurb-foundation

我正在使用Foundation框架,我想制作一个占用网格类宽度100%的导航。

我有3个div:.header_beg.header_rep.header_end

.header_beg2px widthfloat: 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%宽度。

1 个答案:

答案 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;
}