DAY03 - [CSS＋RWD] 拼圖拼圖

13th鐵人賽

joannachen

2021-09-03 23:21:05

692 瀏覽

分享至

今日文章目錄
> - 拼圖拼圖
> - 事前準備
> - 思考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顯示圖片比例不合理，還要再修正才行。(原本希望顯示圖片可以自適應裝置螢幕，所以用了%，但是高度...)
待研究課題：如果在不清楚每次圖片大小的情況，要如何避免顯示圖水平、垂直居中？而且確保顯示不會有露白？
最後留下露白的失敗圖跟大家道別～