多元素水平居中 小三角布局

2021-07-15 14:51:51 字數 1144 閱讀 1973

做完公司的活啦。寫倆題。

需求:

實現多個方塊水平居中。每個方塊中文字水平垂直居中。

思路:

如何實現多div水平居中呢? display:inline-block

如何實現文字水平居中呢? text-align:center

如何實現文字垂直居中呢? line-height等於height

原始碼:

class="wrap">

class="inner basic">1

div>

class="inner basic">2

div>

class="inner basic">3

div>

class="inner basic">4

div>

div>

.basic

.wrap

.inner

需求:

簡化一下:實現正方形帶乙個小三角。

思路:

如果乙個div,它的width和height都為0,設定它的border不為0,就會出現4個三角形的border。

比如:class="c">div>

設定它的css屬性

.c

結果就是這麼花哨:(忽略上面的黑線,那是我實現的另乙個div,不小心截進來了。)

那我們只需要把左側border設為有色,其他三面border都設為白色,然後讓它貼在另乙個div右側,就實現小矩形帶小三角啦。

開始實現:

class="basic">div>

class="tri2">div>

.basic

.tri2

完美實現。

css實現小三角

其實早都做過用css來實現小三角的箭頭符號了,不過一直都沒靜下心來仔細研究,今天正好多看了些,都說好記性不如爛筆頭,把所了解到的趕緊記錄下來。大致有兩種方法 邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角 字元法就是採用菱形的字元 然後決定定位把多餘的部分溢位掉,該種方法只適合三角和...

css3實現小三角

利用css3的新特性可以完成很多圖形的構建,下面演示如何利用border的特性構建乙個小三角。我們首先新建乙個div,給這個div設定class demo 然後給demo設定如下屬性 demo顯示效果是這樣的 可以看到四個不同顏色的三角形連在一起。我們只想要乙個,比如向上的紅色三角形,怎麼辦,那就是...

51nod1488 帕斯卡小三角

可以證明以下幾個結論。所求的f x y 即為從第一行的某一點開始往下走,只能向下或向右下走,到點 x y 的最短路。所走的路徑,只在某一列有豎直向下的路徑,在其他列都為斜向下。進一步地,一定是從起點開始往下,然後一直斜向下。如果i y 且ai aj 那麼 i 一定不是最優解。記a i的字首和為si ...