css 實現三個 div 等分排在一行

2021-09-29 15:59:58 字數 1183 閱讀 5550

(1)box-sizing: border-box;實現:

<

!doctype html>

border-box 實現三個div等分排在一行<

/title>

*.container

.item

.container:after

<

/style>

<

/head>

="container"

>

="item"

>這是第乙個div<

/div>

="item"

>這是第二個div<

/div>

="item"

>這是第三個div<

如果不設定box-sizing只設定width:33.33%,很容易出錯,因為margin,border和padding不計算在盒子的width中,所以33.33%達不到效果,可能會因為margin和padding 整體的寬度超過了100%,所以需要設定box-sizing: border-box;

(2)flex 實現:

<

!doctype html>

border-box 實現三個div等分排在一行<

/title>

*.container

.item

<

/style>

<

/head>

="container"

>

="item"

>這是第乙個div<

/div>

="item"

>這是第二個div<

/div>

="item"

>這是第三個div<

CSS 實現某乙個div居中顯示

做專案的時候,有遇到這種居中的模組,如下圖所示 但是這個居中就不太容易實現,網上蒐集的資料全是有個父級元素,然後設定什麼postion relative 子元素設定position absolute等等 但是我這個父級元素是在feed流裡面,就是很難實現對整個螢幕設定成relative等等,所以進行...

學習日記(一)List的三個實現類

set和list的區別 list特點 元素有放入順序,元素可重複 set特點 元素無放入順序,元素不可重 注意 元素雖然無放入順序,但是元素在set中的位置是有該元素的hashcode決定的,其位置其實是固定的 list有三個實現類 arraylist linkedlist vector 2.1 a...

224 用乙個陣列實現三個棧

用乙個陣列實現三個棧。你可以假設這三個棧都一樣大並且足夠大。你不需要擔心如果乙個棧滿了之後怎麼辦。threestacks 5 create 3 stacks with size 5 in single array.stack index from 0 to 2 push 0,10 push 10 i...