Фиксированные 3 колонки макета Zurb Foundation CSS

Я хочу сделать 3-Col макет так, что:Фиксированные 3 колонки макета Zurb Foundation CSS

Левая колонка содержит неподвижную/липкие элементы списка
левый и средний столбец закрепили известно ширину
Третья колонка должна быть слева над пространством; нет турника
третьего столбца будет иметь несколько столбцов внутри него, и я хочу использовать рамки Foundation для сетки (ниже пример показывает синий цвет два больших-6)
Всех столбцов должны расширяться от верхней части к нижним

Я хочу использовать Основание Zurb Foundation и многократно использовать из рамки сетки.

Вот идеальное расположение:

enter image description here

Это мой код до сих пор: http://jsfiddle.net/qhoc/UUfSF/

<body> 
    <div class='row'> 
     <div class='col1 columns'> 
      <ul class='sticky'> 
       <li>Item 1</li> 
       <li>Item 2</li> 
       <li>Item 3</li> 
       <li>Item 4</li> 
       <li>Item 5</li> 
      </ul> 
     </div> 
     <div class='col2 columns'> 
      <div>Some text 2</div> 
     </div> 
     <div class='col3 columns'> 
      <div class='row'> 
       <div class='large-6 columns'>Left</div> 
       <div class='large-6 columns'>Right</div> 
      </div> 
     </div> 
    </div> 
    </body>

CSS-код:

body { 
    position: relative; 
} 

.sticky{ 
    position:fixed; 
    z-index:999; 
} 

.col1 { 
    position: absolute; 
    left: 0; 
    background: yellow; 
} 

.col2 { 
    position: absolute; 
    left: 150px; 
    top: 0; 
    bottom: 0;  
} 

.col2 div { 
    background: red; 
} 

.col3 { 
    position: absolute; 
    left: 300px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
} 

.col3 div { 
    background: blue; 
}

Есть несколько проблем:

третья колонка расширения по ширине экрана
Ни одна из колонн не расширения вплоть до внутренних колонн нижней
3-го столбца с использованием большого 6 просто не похоже на работу

Пожалуйста, помогите устранить проблему макета. Спасибо!!

источник

2013-08-20 HP.

ваш jsfiddle отсутствует внешний JS библиотеку - получаю брошенную ошибку - 'ReferenceError: $ не определен http://fiddle.jshell.net/qhoc/ UUfSF/show/ Линия 47' –

width: auto Я добавил, и он работает

http://jsfiddle.net/qhoc/UUfSF/2/

источник

2013-08-20 05:10:18

Фиксированные 3 колонки макета Zurb Foundation CSS

ответ

Смежные вопросы