H5 布局tips
来源:互联网 发布:matlab cell数组 拼接 编辑:程序博客网 时间:2024/06/05 15:37
需求
实现左右图片 中间文字布局,限制文字一行 显示不下的 用…代替
实现效果
CSS代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习</title> <style> * { margin: 0; padding: 0; font-size: 12px; } .header{ color: white; background-color: #999; font-size: 18px; } .bullet-title{ float: left; margin-left: 10px; width: 20px; height:20px; background-color: blue; } .bullet-content{ overflow: hidden; white-space: nowrap; box-sizing: border-box; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; float: left; height: 20px; line-height: 20px; width:calc(100vw - 80px); color: red; } .bullet-image{ float: right; width: 20px; height: 20px; background-size: 20px 20px; background-repeat: no-repeat; margin-right: 10px; } </style></head><body><div class="header"> <div class="bullet-wrapper"> <img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-title"> <div class="bullet-content">了解一点的 我去二群无王二去玩儿我去二去玩儿群无去玩儿群而且去玩儿企鹅王若群额确认去玩儿群而且去玩儿确认去 委屈</div> <img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-image"> </div></div></body></html>
效果:
Flex布局
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习</title> <style> * { margin: 0; padding: 0; font-size: 12px; } .header { color: white; background-color: #999; font-size: 0px; } .bullet-wrapper { display: -webkit-flex; flex: 1; justify-content: space-between; align-items: center; /*主轴水平 默认值*/ /*flex-direction: row;*/ height: 40px; } .bullet-wrapper .bullet-title { width: 40px; margin-left: 10px; } .bullet-wrapper .bullet-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; background-color: red; } .bullet-wrapper .bullet-image { width: 40px; height: 40px; margin-right: 10px; flex: 1; } .bullet-wrapper .bullet-image img{ width: 40px; height: 40px } </style></head><body><div class="header"> <div class="bullet-wrapper"> <img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-title"> <div class="bullet-content">了解一点的 我sdadsasdadasdasdadasdadaxcxxcvxvxcvxcvxcv去二群无王二去玩儿我去二去玩儿群无去玩儿群而且去玩儿企鹅王若群额确认去玩儿群而且去玩儿确认去 委屈</div> <div class="bullet-image"> <img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg"> </div> </div></div></body></html>
效果:
阅读全文
0 0
- H5 布局tips
- h5布局
- 三栏式布局中的tips
- 移动h5自适应布局
- h5 css布局
- 手机H5自适应布局
- h5界面布局
- h5双飞翼布局
- h5自适应布局
- android布局tips,基础知识搜集
- (Tips)Android之TabHost布局
- Android Studio Tips -- 布局预览
- 【Android Studio】Tips -- 布局预览
- Android Studio Tips -- 布局预览
- Android Studio Tips -- 布局预览
- Android Studio Tips -- 布局预览
- Android Studio Tips -- 布局预览
- Android Studio Tips -- 布局预览
- pku acm题目分类 (1)
- Python的模块
- OpenStack+Ceph+热迁移+++六、测试是否运行正常
- 学习笔记:信息检索(3) 词典及容错式检索
- shell脚本习题
- H5 布局tips
- 使用Renesas E1烧录RL78/G13(R5F100AA)芯片
- 《大型分布式网站架构设计与实践》
- [51Nod1676 无向图同构]无向图哈希
- 成为Android高级工程师看这里就够了
- 随手记-处理图片内存溢出
- vue 刷新当前路由
- [LeetCode] [C++] 62. Unique Paths
- ActiveMQ之集群(主从)搭建-yellowcong