Board logo

標題: [分享] 多個div并排時最好設置劃一的高度 [打印本頁]

作者: yyhero18net     時間: 2020-9-8 02:45 PM    標題: [分享] 多個div并排時最好設置劃一的高度

多個div并排時最好設置劃一的高度
演示:模擬屏幕 320 x 200,若x4=1280注意:黃框是主素材div 設width:160 height:100。
1
2
3
4
5
6
7
8


看演示:8個紅色div都是width:30px;height:30px;
但假若4溢出變成height:40px 下一行的6就沒法向左排
會卡在4繼續排下去嘞 所以一是修改4變成劃一height:30px
或者其他的div都將就4 變成劃一height:40px 使其能美觀排列
參數如下
CODE:  [Copy to clipboard]
<div style="width:160px;height:100;border: 3px solid yellow;">
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">1</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">2</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">3</div>
  <div style="float:left;width:30px;height:40px;border: 3px solid red;">4</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">5</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">6</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">7</div>
  <div style="float:left;width:30px;height:30px;border: 3px solid red;">8</div>
</div>





歡迎光臨 YyHero18Net 首頁 (http://www.yyhero18net.com/yyhero18net/) Powered by Discuz! 2.5