这种展示应该如何制作出来?而且这个图片如何缩略且清晰?直接添加图片会把整张缩略并且不清晰啊。
这种展示应该如何制作出来?而且这个图片如何缩略且清晰?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- _yangyi 2022-02-02 17:26关注
兄弟是需要纯css html写还是在vue中写?
纯css html<style> .box{ height: 100px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-left: 15px; } .handle{ width: 100%; display: flex; justify-content: center; align-items: center; } .handle span{ margin: 0 10px; } p{ margin: 0; } </style> <body> <div style="display: flex;justify-content: flex-start;align-items: center;"> <img src="./12.jpg" style="width: 200px;height: 100px"> <div class="box"> <p class='title'> 有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译有道翻译 </p> <p class="handle"> <span><i></i>点赞</span> <span><i></i>踩</span> <span>挣扎的蓝藻</span> <span>...</span> </p> </div> </div> </body>
另外第一行是单行文本显示样式
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
- ¥15 目前主流的音乐软件,像网易云音乐,QQ音乐他们的前端和后台部分是用的什么技术实现的?求解!
- ¥60 pb数据库修改与连接
- ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
- ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
- ¥20 神经网络Sequential name=sequential, built=False
- ¥16 Qphython 用xlrd读取excel报错
- ¥15 单片机学习顺序问题!!
- ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
- ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)