плаващ div 100% ширина

Използвам рамката 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% ширина на класа на мрежата.


html css repeat width zurb-foundation
person vjordanov    schedule 28.12.2012    source източник
comment
Защо се нуждаете от 1px div?   -  person Kyle    schedule 28.12.2012
comment
Защото навигацията е заоблена   -  person vjordanov    schedule 28.12.2012
comment
използвайте border-radius insted   -  person Champ    schedule 28.12.2012
comment
Навигацията: връзка   -  person vjordanov    schedule 28.12.2012
comment
Ще го пробвам с CSS3... Надявам се да проработи. Благодаря все пак!   -  person vjordanov    schedule 28.12.2012

Отговори (1)


arrow_upward
1
arrow_downward

Можете да направите това с поплавъци, но вместо да го правите чрез поплавъци, ще ви покажа как да направите това с абсолютна позиция:

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;
}
person ProfileTwist    schedule 28.12.2012