浮动div 100％宽度

Question

我正在使用Foundation框架，我想进行一个导航，该导航需要100％的网格类宽度。

我有3个div： .header_beg ， .header_rep ， .header_end

.header_beg的2px width为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放置在红色divs的开始和结尾处，并将3 divs同时设为网格类的100％宽度。

Answer 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;
}