2

Foundation フレームワークを使用しており、グリッド クラスの幅を 100% 使用するナビゲーションを作成したいと考えています。

私は 3 つの div を持っています: .header_beg, .header_rep,.header_end

.header_beg2px 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を赤の最初と最後に配置し、同時に 3divsをグリッド クラスの幅 100% にする必要があります。

4

1 に答える 1

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;
}
于 2012-12-28T13:12:18.297 に答える