移動端導航左右固定 中間自適應的實現

2021-10-05 10:29:02 字數 397 閱讀 9720

返回

我是標題

兩個其他的點要注意:

「line-height: 2.3rem;」 配合上之前的 「height: 2.3rem;」 就可以使單行文字水平居中,通過在父元素上設定,三個子元素都可以繼承的到。

.tt-header 使用的怪異盒模型,但在做垂直居中的時候 height 和 line-height 使用的是同樣的豎值,把 border-bottom 的寬度忽略也沒問題。

「overflow: hidden; white-space: nowrap; text-overflow: ellipsis;」 這三條語句組合使用,就可以對單行超長文字做截斷,並且在截斷的地方自動補充省略號。

當標題文字超長時,就會自動截斷:

左右固定中間自適應布局

1.這是三欄布局中間部分 2.這是三欄布局中間部分 1.這是三欄布局中間部分 2.這是三欄布局中間部分 其實稍微想一下就能想到這個flex布局,article的display設定為flex,左右div寬度固定,中間div的flex屬性設定為1,讓其自動填充剩下的空間 1.這是三欄布局中間部分 2.這...

聖杯布局(左右固定,中間自適應)

flex布局 class container class left class center class right 定位,定位元素 脫離文件流了 浮動布局 class layout float class left right center class left class right class...

三欄布局 左右固定,中間自適應

之前有寫過關於固定父布局,然後父布局內有是兩列自適應。現在我們來看看三欄布局,當左右固定,中間的布適應是如何實現的。這裡將介紹兩種方法,一種是使用margin值,另一種是使用position絕對定位。首先我們來看第一種方法,下面是實現的 無標題文件left right 1.請補充右側編輯器的任務1,...