您现在的位置是：网站首页> 编程资料编程资料

CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS columns实现两端对齐布局的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局CSS 外边距(margin)重叠及防止方法解决margin 外边距合并问题 css 布局之两端布局的实例代码（利用父级负的margin）

2021-09-03 1022人已围观

简介这篇文章主要介绍了CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

百度面试碰到的题，要实现如下布局效果

其中中间这紫色的一栏的大小随字体的多少而变宽/变窄，且多出的文字自动省略为[...],右边的绿色栏要紧紧连着紫色这一栏。主要对紫色这一栏的操作为：

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 部分 
 zhasansndfdkfnald 
设计师

总结

到此这篇关于CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码的文章就介绍到这了,更多相关css三栏布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS3实现歌词进度文字颜色填充变化动态效果的思路详解简单掌握CSS3将文字描边及填充文字颜色的方法

下一篇：使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码CSS columns实现两端对齐布局的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局CSS 外边距(margin)重叠及防止方法解决margin 外边距合并问题 css 布局之两端布局的实例代码（利用父级负的margin）

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢