Ex:Bakery3:元素位置排列

範例結果

主題:元素位置排列

  1.  方法1:麻將牌桌法:
    • float
  2. 方法2:父子關係精準定位法:
    • position
  3. 方法3:推來推去擺放法:
    • display:inline-block
    • 結合padding及margin

 

元素位置排列方法1:float:麻將牌桌法

重要參考連結:

  1. clear解除 float 屬性
  2. overflow 屬性用法讓你掌握控制捲軸效果
  3. 子區塊float造成的困擾

練習1:section2 蛋糕小秘訣 中,杯子蛋糕種類

html結構

.cakeblock>div*8>img[src="./img/cake$$.png"]>p{杯子蛋糕$$}


          <div class="cakeblock">
            <div><img src="./img/cake01.png" alt=""><p>杯子蛋糕01</p></div>
            <div><img src="./img/cake02.png" alt=""><p>杯子蛋糕02</p></div>
            <div><img src="./img/cake03.png" alt=""><p>杯子蛋糕03</p></div>
            <div><img src="./img/cake04.png" alt=""><p>杯子蛋糕04</p> </div>
            <div><img src="./img/cake05.png" alt=""><p>杯子蛋糕05</p></div>
            <div><img src="./img/cake06.png" alt=""><p>杯子蛋糕06</p></div>
            <div><img src="./img/cake07.png" alt=""><p>杯子蛋糕07</p></div>
            <div><img src="./img/cake08.png" alt=""><p>杯子蛋糕08</p></div>
          </div>

CSS美化

.cakeblock{
  overflow: hidden;
}
.cakeblock>div{
  float: left;
  width: calc(100%/3);          /*重點確認_課程中改為6或8確認圖片大小控制*/
}
.cakeblock img{
  width: 100%; height: auto;
}
.cakeblock p{
  text-align: center;
  font-weight: bold;
  color: #5f052d;
  text-indent: 0;          /*重點確認*/
}


/*==了解calc用途,調整之*/
section{
  min-height:calc(100vh - 40px);
  padding: 20px;
}