关于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%,然后其中的内容再按照上下两部分划分的形式来布局。不知道这样的布局方式是不是合理呢?个人感觉有点累赘了,不够简洁。另外,因为第一次作业忘了在不同分辨率下去测试,导致网页在其他更高分辨率情况下错乱非常严重,我已经按照老师的批改意见做了改正并重新提交,希望老师能在布局方面给出一点合理的建议,谢谢!
15
收起
正在回答
1回答
你好,因为这边只有你的部分代码,不能确定你的问题。如果作业中有不合适的地方,批改作业的老师会给出修改建议;这里关于图片部分的布局,有以下建议:1、最外层的盒子宽度设置为100%,然后设置包括图片的盒子为固定值(因为若为百分比的话,会随页面发生变化,那么图片整体的宽度可能会大于或小于盒子的宽度,除非设置图片的宽度也是百分比),该值等于三个图片以及三张图片内外边距之和。这样一行正好可以存放三张图片,就不用分为2行设置了。然后给包裹图片的盒子设置margin: 0auto;设置居中。当然实现效果的方法不是唯一的,若是你的方法没有完全居中,可以参考下该方法。
祝学习愉快~
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星