css元素分散貼邊對齊
阿新 • • 發佈:2018-11-28
怎樣讓多個元素貼邊平分?
為什麼會有這個疑問呢?首先說明一下,接觸前端有一年的時間了,自認為對靜態佈局不在話下,果然,自負的人最容易被打臉吶,剛換了一份工作,公司對前端要求比較嚴格。
公司使用的是bootstrap開發,我們都知道bootstrap框架最核心的是它的柵格系統,我當然也很喜歡這個啦,不過最近UI給我的設計圖總是和bootstrap相矛盾,就好比說,有個模組需要每一個元素在移動端和螢幕之間有固定的間距,但是在響應到pc端時,要在有效寬度內貼邊對齊。這就很扯淡啦。我畫個圖表示一下內心的狂躁……
就是實現下面這種結果,看著真的沒什麼難度,不過因為我是用bs的柵格來佈局的,所以需要修改bs的padding的值,這種方法不算明智,所以我思考和彙總了幾種實現的做法。都是很基礎的。
1.怎樣讓四個沒有內邊距和邊框的元素貼邊平分?
<!--怎樣讓四個沒有內邊距和邊框的元素貼邊平分?-->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
/*
* 怎樣讓四個沒有內邊距和邊框的元素貼邊平分?
*/
.box{
width: 1170px;
margin: 30px auto 0;
border:1px solid #00a09d;
font-size: 0;
}
.box>div{
display: inline-block;
font-size: 16px;
width:23.5%;
height: 100px;
background: #ddd;
text-align: center;
}
.box>div:nth-child(n+2){
margin-left:2%;
}
這個是最基礎的,也是最簡單的,沒什麼好說的了,使用最簡單的平分寬度實現。效果圖:
2.怎樣讓四個有內邊距和邊框的元素貼邊平分?
這個就有意思了,每次在開發過程中,只要設定width+padding+border,問題就接踵而來了。不是元素被擠到下一行,就是這一行的寬度沒有平分完。所以我使用了下面的幾種方法。
先設定基礎樣式:
<!--怎樣讓四個有內邊距和邊框的元素貼邊平分?-->
<div class="div-box div-box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
/*
* 怎樣讓四個有沒有內邊距和邊框的元素貼邊平分?
*/
/*基礎樣式*/
.div-box{
width: 1170px;
margin: 30px auto 0;
border: 1px solid #000;
}
.div-box div{
width: 150px;
height: 150px;
background: #ddd;
padding: 15px;
border: 1px solid #000;
text-align: center;
}
- 居中方式一 : 怪異盒模型+平分寬度
/*居中方式一:怪異盒模型+平分寬度*/
.div-box1 div{
box-sizing: border-box;
}
.div-box1{
font-size: 0;
}
.div-box1 div{
display: inline-block;
font-size: 16px;
width: 23.5%;
}
.div-box1 div:nth-child(n+2){
margin-left:2%;
}
- 居中方式二:浮動+怪異盒模型+平分寬度
/*居中方式二:浮動+怪異盒模型+平分寬度*/
.div-box2::after{
content: "";
display: block;
clear: both;
}
.div-box2 div{
box-sizing: border-box;
float: left;
width: 23.5%;
}
.div-box2 div:nth-child(n+2){
margin-left:2%;
}
- 居中方式三:彈性盒子(用這個最好啦)
/*居中方式三:彈性盒子(用這個最好啦)*/
.div-box3{
display: flex;
/*flex-direction:row; //子元素的排列方向,預設是row */
/*flex-wrap:nowrap; //子元素超出父級後是否換行,預設不換行,設定的寬度會失效 */
/*flex-flow:row nowrap //上面兩個屬性的複合寫法 */
/*子元素在父元素上的對其方式:flex-start前對齊||flex-end後對齊||center居中對齊||space-between和邊緣無間距對齊||space-around和邊緣有間距對齊*/
justify-content: space-between;
}
.div-box3>div{
width: 23%;
}
.div-box3>div:nth-child(n+2){
margin-left: 2%;
}
- 居中方式四:寬度屬性計算(不提倡,相容性不好)
/*居中方式四:寬度屬性計算(不提倡,相容性不好)*/
.div-box4{
font-size: 0;
}
.div-box4>div{
display: inline-block;
font-size: 16px;
width: calc(23.5% - 32px); /*數學符號之間一定要有空格*/
}
.div-box4>div:nth-child(n+2){
margin-left: 2%;
}
以上四種方式實現的效果都是這樣的:
最後,只有掌握最基礎最底層的技術,才能在開發過程中更高效地完成任務。勤勞能致富,後面我要更努力去思考更有用的知識。:)