基金会Zurb媒体查询-Java 学习之路

我正在尝试将这两个列的位置切换为大8和大4，我希望在小屏幕上查看页面时文本位于图像下方 .

enter image description here

列结构是这样的

div id="roofing">
            <div class="large-8 columns">
                <h3>Roofing</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Vitae tempora quia voluptas iure iste quas libero esse maiores dolore illo magni quo magnam voluptatem,
                        ea suscipit, quaerat omnis delectus dolorem!
                    </p>
            </div>
            <div class="large-4 columns">
                <!-- <img src="http://placehold.it/350x150"> -->
                <img src="imgs/roofing.jpg" alt="">
            </div>
        </div>

媒体查询（40em）

#roofing{
        .large-8{
            // width: 33.33333%;
            float: left;
            background: red;
        }
        .large-4{
            // width: 66.66667%;
            float: right;
        }
    }

我认为改变它的浮子会起作用但不幸的是它没有 .

1 回答

你不是't need css for that just foundation'的预定义类（合并） small live DEMO和alternate large-push 和 large-pull 数字

将你的标记改为full page DEMO

<div id="roofing" class="row">
    <div class="large-4 large-push-8 small-12 columns">
        <!-- <img src="http://placehold.it/350x150"> -->
        <img src="imgs/roofing.jpg" alt="" />
    </div>
    <div class="large-8 large-pull-4 small-12 columns">
        <h3>Roofing</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Vitae tempora quia voluptas iure iste quas libero esse maiores dolore illo magni quo magnam voluptatem,
            ea suscipit, quaerat omnis delectus dolorem!
        </p>
    </div>      
</div>

回复于 2024-05-08T08:07:39+08:00

基金会Zurb媒体查询

1 回答

相关问题