这种展示应该如何制作出来?而且这个图片如何缩略且清晰?直接添加图片会把整张缩略并且不清晰啊。
这种展示应该如何制作出来?而且这个图片如何缩略且清晰?
- 写回答
- 好问题 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 c语言怎么用printf(“\b \b”)与getch()实现黑框里写入与删除?
- ¥20 怎么用dlib库的算法识别小麦病虫害
- ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
- ¥15 java写代码遇到问题,求帮助
- ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
- ¥15 有了解d3和topogram.js库的吗?有偿请教
- ¥100 任意维数的K均值聚类
- ¥15 stamps做sbas-insar,时序沉降图怎么画
- ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
- ¥15 关于#Java#的问题,如何解决?