Сделать выравнивание по вертикали с помощью основы 4

Question

Я совершенно ошеломлен и не могу найти никакого решения, которое даже отдаленно работает!! Я пытаюсь сделать вертикальные вкладки, которые будут справа, а контент будет слева. Я использую Foundation 4 Framework. Использование вертикальной навигации в их документах делает вкладки, но я не могу переместить их вправо. Любая идея будет очень ценится. Я использую код, приведенный в основных документах: http://foundation.zurb.com/docs/components/section.html. см вертикальная навигация.

Скриншот, чтобы показать, чего я пытаюсь достичь: http://i47.tinypic.com/246nmnr.jpg

Большое спасибо за помощь.

Answer 1

Поместите содержимое и навигацию в столбцах. Посмотрите пример ниже и посмотрите его в действии здесь. Вам нужно изменить размер области "Результат" в jsfiddle, чтобы увидеть эффект columns,

<div class="row">
    <div class="small-12 large-9 columns">
        <p >This is your content area</p>
    </div>
    <div class="small-12 large-3 columns">
        <div class="section-container vertical-nav" data-section="vertical-nav" style="">
            <section class="section">
                <p class="title"><a href="#">Privacy Policy</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">License agreement</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">DMCA</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">Proprietary Notices</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">Trademarks</a></p>                    
            </section>           
        </div>
    </div>
</div>