关于2-10作业的问题

关于2-10作业的问题

 <!--gallery 区 -->
<div class="gallery">

     <!--上部标题和文字 -->
    <div class="ga-word">
        <div class="title">GALLERY</div>
        <hr/>
        <div class="ti-word">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industy.Lorem Ipsum has been the industy's standard dummy text ever since the 1500s
        </div>
    </div>
    
    <!-- 下部图文 -->
    <div class="ga-pic">
        <!-- 左侧内容 -->
        <div class="left"></div>

        <!-- 中间内容 -->
        <div class="middle">

            <!--上部 -->
            <div class="ga">
                <div class="pic-i">
                    <div><img src="img/03-01.jpg" alt=""></div>
                    <p>SCIENCE LAB</p>
                </div>

                <div class="pic-i">
                    <img src="img/03-02.jpg" alt="">
                    <p>INDOOR STADIUM</p>
                </div>

                <div class="pic-i">
                    <img src="img/03-03.jpg" alt="">
                    <p>TRANSPORTATION</p>
                </div>

            </div>
            <!--下部-->
            <div class="ga">

                <div>
                     <div class="pic-i">
                         <img src="img/03-04.jpg" alt="">
                         <p>KIDS ROOM</p>
                    </div>

                    <div class="pic-i">
                        <img src="img/03-05.jpg" alt="">
                        <p>MADITATION CLASSES</p>
                    </div>

                    <div class="pic-i">
                        <img src="img/03-06.jpg" alt="">
                        <p>KIDS PLAY GROUND</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right"></div>
    </div>
</div>

http://img1.sycdn.imooc.com//climg/5a675caa000170b718221028.jpg

对于网页 gallery 区域,有没有比较简洁合理的布局方式呢?我的做法是把整个 gallery 区域划分为上下两部分,其中上部分100%宽度,内容居中,下部分采用了一行三列的布局方式,左右侧内容占15%,中间部分内容占了70%,然后其中的内容再按照上下两部分划分的形式来布局。不知道这样的布局方式是不是合理呢?个人感觉有点累赘了,不够简洁。另外,因为第一次作业忘了在不同分辨率下去测试,导致网页在其他更高分辨率情况下错乱非常严重,我已经按照老师的批改意见做了改正并重新提交,希望老师能在布局方面给出一点合理的建议,谢谢!

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,因为这边只有你的部分代码,不能确定你的问题。如果作业中有不合适的地方,批改作业的老师会给出修改建议;这里关于图片部分的布局,有以下建议:1、最外层的盒子宽度设置为100%,然后设置包括图片的盒子为固定值(因为若为百分比的话,会随页面发生变化,那么图片整体的宽度可能会大于或小于盒子的宽度,除非设置图片的宽度也是百分比),该值等于三个图片以及三张图片内外边距之和。这样一行正好可以存放三张图片,就不用分为2行设置了。然后给包裹图片的盒子设置margin: 0auto;设置居中。当然实现效果的方法不是唯一的,若是你的方法没有完全居中,可以参考下该方法。

祝学习愉快~

  • 鱼蛋肠粉 提问者 #1
    非常感谢!提交的作业批复看到了,竟然又忘记去设置中间图片的箭头了,还要再细心.......
    2018-01-24 22:12:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师