关于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>

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

鱼蛋肠粉 2018-01-24

源自：项目：网页布局案例 2-10 作业题

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2018-01-24 10:23:11

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

祝学习愉快~

收起回答