欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼

  發(fā)布時(shí)間：2020-06-02 15:18:48   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

百度面試碰到的題，要實(shí)現(xiàn)如下布局效果

其中中間這紫色的一欄的大小隨字體的多少而變寬/變窄，且多出的文字自動(dòng)省略為[...],右邊的綠色欄要緊緊連著紫色這一欄。 主要對(duì)紫色這一欄的操作為：

1.flex: 0 1 auto (自適應(yīng))

2.text-overflow:ellipsis;(自動(dòng)省略文字)

overflow:hidden;

white-space: nowrap;

完整的代碼如下

// CSS 部分
.container {
  display: flex;
}
.pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: pink;
}
.name {
  flex:0 1 auto;
  height: 100px;
  background-color: purple;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space: nowrap;
}
.tag {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: seagreen;
}
// HTML 部分
<div class="container">
    <div class="pic"></div>
    <div class="name">
        zhasansndfdkfnald
    </div>
    <div class="tag">設(shè)計(jì)師</div>
</div>

總結(jié)

到此這篇關(guān)于CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼的文章就介紹到這了,更多相關(guān)css三欄布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng))

    這篇文章主要介紹了使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下
    2020-06-02

  • CSS columns實(shí)現(xiàn)兩端對(duì)齊布局的示例代碼

    這篇文章主要介紹了CSS columns實(shí)現(xiàn)兩端對(duì)齊布局效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-05-28

  • 用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn)

    這篇文章主要介紹了用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編
    2020-05-26

  • 解決CCS中的margin：top塌陷問(wèn)題

    這篇文章主要介紹了CCS中的margin：top塌陷問(wèn)題,本文通過(guò)實(shí)例截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-27

  • css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局

    這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一
    2020-03-09

  • CSS 外邊距(margin)重疊及防止方法

    這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-08-14

  • 解決margin 外邊距合并問(wèn)題

    這篇文章主要介紹了解決margin 外邊距合并問(wèn)題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-07-03

  • css 布局 之 兩端布局的實(shí)例代碼 （利用父級(jí)負(fù)的margin）

    這篇文章主要介紹了css 布局 之 兩端布局 （利用父級(jí)負(fù)的margin）的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋
    2020-06-08

最新評(píng)論