亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

1.flex: 0 1 auto (自適應)

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

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">設計師</div>
</div>

總結(jié)

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

相關文章

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

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

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

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

  • 用CSS Grid布局制作一個響應式柱狀圖的實現(xiàn)

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

  • 解決CCS中的margin：top塌陷問題

    這篇文章主要介紹了CCS中的margin：top塌陷問題,本文通過實例截圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-03-27

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

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

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

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

  • 解決margin 外邊距合并問題

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

  • css 布局 之 兩端布局的實例代碼 （利用父級負的margin）

    這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋
    2020-06-08

最新評論