css使多個相互之間有間隔的元素兩端對齊顯示
阿新 • • 發佈：2019-01-10
場景重現
電商網站經常會出現如下佈局來展示商品圖片，每行4個，每個和每個之間有20px的距離，兩端對齊，假設總寬度為500px
效果列舉
失敗效果
成功效果
程式碼示例
方法一：width: 25%; margin-right: -20px;
說明：每個大的item寬度25%，那麼4個正好排成一行，item裡面的div右邊距20px，最後設定最大的包裹div右邊距-20px，使右邊界對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title 方法二calc：width: calc((100% - 20px*3)/4); .item:nth-child(4n)
說明：使用css3新屬性calc佈局(注意不同瀏覽器的相容字首)
* 設定寬度
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.ctn {
width: 500px;
height: 300px;
background: grey;
}
.hidden {
overflow: hidden;
}
.item-ctn {
margin-bottom: -20px;
background: blue;
}
.item-ctn:after {
content: '';
display: block;
clear: both;
}
.item {
float: left;
width: calc((100% - 20px*3)/4);
margin-right: 20px;
height: 100px;
margin-bottom: 20px;
}
.item:nth-child(4n) {
margin-right: 0;
}
.item-ctx {
height: 100%;
background: red;
}
</style>方法三flex：display: flex; justify-content: space-between;
說明：使用flex佈局，子元素間隔且兩端對齊即可(注意不同瀏覽器的相容字首)
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.ctn {
width: 500px;
height: 300px;
background: grey;
}
.hidden {
overflow: hidden;
}
.item-ctn {
margin-bottom: -20px;
background: blue;
/* 彈性盒子 */
display: flex;
/* 沿行軸線兩端對齊，子元素之間有間隙 */
justify-content: space-between;
/* 子元素溢位父容器時換行 */
flex-flow: row wrap;
}
.item {
width: 110px;
height: 100px;
margin-bottom: 20px;
}
.item-ctx {
height: 100%;
background: red;
}
</style>方法四grid：display: grid; justify-content: space-between;
說明：使用網格佈局，子元素間隔且兩端對齊即可(注意不同瀏覽器的相容字首)
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.ctn {
width: 500px;
height: 300px;
background: grey;
}
.hidden {
overflow: hidden;
}
.item-ctn {
margin-bottom: -20px;
background: blue;
/* 網格佈局 */
display: grid;
/* 定義網格的行和列 */
grid-template: auto / 110px 110px 110px 110px;
/* 沿行軸線兩端對齊，子元素之間有間隙 */
justify-content: space-between;
}
.item {
width: 110px;
height: 100px;
margin-bottom: 20px;
}
.item-ctx {
height: 100%;
background: red;
}
</style>