css - 浮动 div 100% 宽度

Question

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

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

.header_beg是和也2px width_float: left.header_end

但我想要header_rep1px 宽度，repeat-x直到它填充 100% 的网格类。但它也需要它float: left，但float: left它是不可见的。我没有设置宽度，因为我希望它是网格类的 100%。

background: red;
height: 49px;
margin-left: 2px;

这是一个小提琴：http: //jsfiddle.net/WFVER/

我需要绿色divs在红色的开头和结尾，同时 3divs是网格类的 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;
}