时间戳

首页 > 解决方案 > Two column wide image in three column wide page

css - Two column wide image in three column wide page

问题描述

I use Foundation 4 in my site. I try to figure out how to make an image span over 2 columns in a 3 columns wide page using the Foundation grid. This is how I want it to look:

enter image description here

Is it at all possible to use nested rows for this? Here is my html so far (not working):

<div class="row">
    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
        <div class="row">
            <div class="large-8 columns pull-8">
                <div><img class="bild" src="myimage.jpg"></div>
            </div>
        </div>
    </div>
</div>

标签： csszurb-foundation

解决方案

You can just like you do in Bootstrap. While your idea is ok - you are better off doing this as it is best practice to code in line with how Foundation was built to be used.

Here is a wireframe example of what i mean: You must next the rows with your structure inside. Parent rows i guess.

<div class="row">
    <div class="large-4"></div>
    <div class="large-8">
        <div class="row">
            <div class="large-6"></div>
            <div class="large-6"></div>
        </div>
        <div class="row">
        <div class="large-12"></div>
    </div>
</div>

推荐阅读