整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ss3技術實現圖片木桶布局，常用在商品或者圖片展示頁面用于展示不一樣尺寸的圖片！
效果圖：
思路
1、容器flex布局
2、圖片定高、超出換行
3、圖片都設置 flex-grow: 1; 以充滿整行
4、圖片都設置 object-fit: cover; 以解決圖片變形
5、容器 :after 偽類 設置 flex-grow: 9999; 且值足夠高 以解決最后一行圖片數量少時仍然充滿整行過于扁長
代碼：
html+css：
javascript：
注釋：<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。
這個例子使用了四個 <div> 元素來創建多列布局：
<html>
<head>
<style>
#header {
background-color:#1aaa11;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:#faaaff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#166611;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>天華信息教育</h1>
</div>
<div id="nav" >
第一組<br>
第二組<br>
第三組<br>
</div>
<div id="section">
<h2>這是標題</h2>
<p>
這是內容
</p>
<p>
這是內容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>
HTML基礎教程：div元素實現布局
們在網頁制作中，會有許多的術語
例如：CSS、HTML、DHTML、XHTML等等。
下面開始使用DIV+CSS進行網頁布局設計。
所有的設計第一步就是構思，構思好了，還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來。
下面，我們需要根據構思圖來規劃一下頁面的布局，圖片大致分為以下幾個部分：
1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；
2、內容部分又可分為側邊欄、主體內容；
3、底部，包括一些版權信息。
有了以上的分析，我們就可以很容易的布局了，例如以下設計層下圖:
根據上圖，畫一個實際的頁面布局圖，說明一下層的嵌套關系，這樣理解起來就會更簡單了。
DIV結構如下：
│body {} /*這是一個HTML元素*/
└#Container {} /*頁面層容器*/
├#Header {} /*頁面頭部*/
├#PageBody {} /*頁面主體*/
│ ├#Sidebar {} /*側邊欄*/
│ └#MainBody {} /*主體內容*/
└#Footer {} /*頁面底部*/
至此，頁面布局與規劃已經完成，接下來我們要做的就是開始書寫HTML代碼和CSS。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
