DAY03 - [CSS＋RWD] 拼图拼图

今日文章目录
> - 拼图拼图
> - 事前准备
> - 思考CSS的设定
> - 总结这次的问题
> - 参考资料

拼图拼图

今天来依照参考样式做个练习吧！

参考排版

分析资料流：为了让手机排版依序显示，规划以下资料流向。

事前准备

HTML结构：

 <section class="keyView">
    <h1>IT铁人赛-DAY03</h1>
    <div class="container">
        <ul class="viewList">
            <li class="viewItem">
                <a href="#" target="_blank">
                    <img 
                        src="https://fakeimg.pl/840x450/eae0d0/?text=1" 
                        alt="主视图"
                    >
                </a>
            </li>
            <li class="viewItem">
                <a href="#" target="_blank">
                    <img 
                        src="https://fakeimg.pl/360x450/eae0d0/?text=2" 
                        alt="主视图"
                    >
                </a>
            </li>
           
           ...
        </ul>
    </div>
</section>

发现问题：
- 原本安排： 方块3、4、5、6{ float: left } 方块7、8{ float: right }
- 显示结果：方块5 的宽度比第二列剩余空间小，故与方块3、4排在同一列，不是预期的换行排列。
- 解决方法：
  - (1)重新调整资料流规划 : 分成三大块div，每个div内再各别包细项。
  - (2) 重新调整 HTML 架构

<section class="keyView">
    <h1>IT铁人赛-DAY03</h1>
    <div class="container">
        <div class="viewList">
            <div class="mainView">
                <div class="mainItem">
                    <a href="#" target="_blank">
                        <img 
                            src="https://fakeimg.pl/840x550/eae0d0/?text=1" 
                            alt="主视图"
                        >
                    </a>
                </div>
                
                ...
            </div>
            <div class="subView">
                <div class="subItem">
                    <a href="#" target="_blank">
                        <img 
                            src="https://fakeimg.pl/500x550/eae0d0/?text=3" 
                            alt="主视图"
                        >
                    </a>
                </div>
              
              ...
            </div>
            <div class="detailView">
                <div class="detailItem">
                    <a href="#" target="_blank">
                        <img 
                            src="https://fakeimg.pl/360x550/eae0d0/?text=7" 
                            alt="主视图"
                        >
                    </a>
                </div>
               
               ...
            </div>
        </div>
    </div>
</section>

codepen 完整练习：https://codepen.io/chen-chens/pen/qBjaReE?editors=1100

总结这次的练习

为了配合手机的资料流顺序，硬多加三个div让内容符合排版效果，对解法不是很满意，但目前只想到这个方法。(如果有人想到更好的解法，一定要告诉我啊！)
目前的写法有问题: 图片容器宽度单位%，高度单位px，导致codepen 完整练习RWD显示图片比例不合理，还要再修正才行。(原本希望显示图片可以自适应装置萤幕，所以用了%，但是高度...)
待研究课题：如果在不清楚每次图片大小的情况，要如何避免显示图水平、垂直居中？而且确保显示不会有露白？
最後留下露白的失败图跟大家道别～