span 加上float:left的必要性

最新推荐文章于 2022-06-18 23:02:41 发布

飞翔的熊blabla

最新推荐文章于 2022-06-18 23:02:41 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html+js+jquery+css

本文链接：https://blog.youkuaiyun.com/sd19871122/article/details/53156529

html+js+jquery+css 专栏收录该内容

644 篇文章

订阅专栏

有什么问题可以加微信问吧 cannywill ，尽量帮助，一起进步

   <div class="manga_text" style="float:right">
                        <a class="title" href="" rel="10416" style="width: 100%;text-align: left">Akame ga Kill!</a>
                        <p class="info"><span class="stars star50" ></span><span class="rate">4.82</span></p>

代码是这样的 p里的分数icon和分数是同一行但是span 图片却顶到了div的顶部

怎么解决

#mangalist .list li .manga_text p span {
    float: left;
}

这样就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞翔的熊blabla

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

结构力学本构模型：粘塑性模型：粘塑性模型在聚合物材料中的应用_2024-08-06_20-09-40.Tex

05-18

963

Maxwell模型是描述聚合物材料粘弹性行为的一种基本模型，它由一个弹簧和一个粘壶串联组成。弹簧代表材料的弹性部分，而粘壶则代表材料的粘性部分。在Maxwell模型中，当外力突然施加时，材料首先表现出弹性响应，然后随时间逐渐松弛，表现出粘性响应。这一模型特别适用于描述聚合物材料在长时间载荷下的应力松弛行为。Kelvin-Voigt模型是另一种描述聚合物材料粘弹性行为的模型，它由一个弹簧和一个粘壶并联组成。与Maxwell模型不同，Kelvin-Voigt模型更适用于描述材料在恒定应力下的蠕变行为。

《Python星球日记》第28天：数据获取与可视化（综合项目）

Code_流苏：在代码中寻诗意，在实践中觅真知

05-05

1214

《Python星球日记》第28天：数据获取与可视化（综合项目），Python爬虫与数据可视化实战项目，从网络获取电影数据到生成精美图表，全面展示数据分析流程，适合Python初学者提升实战能力。

1 条评论您还未登录，请先登录后发表或查看评论

div的float:left与span标签

abcdcba_的博客

02-18

2789

我是div span span 上述代码中div是float:left，span没有float:left，但是span标签还是显示在div标签的右边，而不是被div标签覆盖。这是因为span标签是一个行内元素不是块级元素。接下来附上它们两个的区别： div与span区别区别在于，div是一个块级(block-level)元素，它包围

css浮动float:left|right

preserveXing的博客

04-12

572

浮动浮动1.浮动是什么2.为什么要用浮动呢3.怎么做4.会怎样5.浮动产生的问题浮动 1.浮动是什么是一种css的样式 div{ float:left;//right } 1.可以让元素脱离文档流取消在标准流中所占的位置 2.如果是left 靠近父元素的左边排列如果是right 靠近父元素的右边排列 2.为什么要用浮动呢进行水平排列常见的元素 --行内元素和块级元素行内元素水平排列共同占一行但是不具有宽高属性块级元素垂直排列单独占一行具有宽高属性你会发

css知识总结

qq_67263268的博客

03-10

176

float浮动造成标签“浮动”，影响“文档流”的空间 float:left;“左浮动” float:right;”右浮动” 有bug加overflow hidden 对span元素添加一个float:left，span元素已经“块”化 border-radius圆角 vertical-align: middle居中适用于图片 jpg像素图，色彩表现丰富常用来做产品图banner png支持透明图标banner gif支持透明支持动图图标 webp支持有损压缩与无损压缩支持压缩同质量的图...

浮动与清除浮动

qq_57215961的博客

04-14

506

浮动的出现主要是解决水平布局的问题对于块标签来说，

关于<span></span><div style="float:left"></div>

weixin_30767921的博客

07-13

489

1 <span></span> 2 <div style="float:left"> 3 </div> 关于以上代码显示页面为什么会是div显示在span之前的理解在以往写代码的过程中，通常是以div为单位写的，因此只理解了div与div之间float的规则。先说一下float这一属性，float:left会使元素变成一个inl...

``` <div style="width: 110%;height: 220%;background-color: white;float: left;margin-top: 40px;margin-left: -660px;border-radius: 10px"> <div style="width: 5px;height: 25px;background-color: #1f78ff;margin-top: 22px;margin-left: 10px;border-radius: 10px;float: left"> </div> <div style="float: left;margin-top: 20px;font-size: 20px;font-weight: bold;width: 40%;"> 今日有效单量：{{ userinfo.today_order || '0' }}单 </div> <div style=" float: right;font-size: 14px;color: gray;padding-top: 20px;padding-right: 20px">更新时间：{{ userinfo.nowtime }} <button @click="showdrawer" type="primary" style="color: rgb(64,158,255);background-color: white;border: none">数据表格 ></button> </div> <div style="clear: both"></div> <div style="float: left;padding-top: 10px;padding-left: 10px;"> 日期A：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalBa }}</span>单日期B：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalAa }}</span>单升幅： <span style="font-weight: bold">{{ this.totalBa - this.totalAa }}</span>单 </div> <div style="clear: both"></div> <div style="float: left;padding-left: 8px;padding-top: 20px"> 对比日期A: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 106px;margin-top: -26px"> <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="timeA" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="clear: both"></div> <div style="float: left;padding-left: 260px;margin-top: -32px;"> 对比日期B: </div> <div style="clear: both"></div> <div style="float: left;padding-left: 360px;margin-top: -36px;"> <el-date-picker value-format="yyyy-MM-dd" style="width: 150px;" v-model="timeB" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="float: right;margin-top: -36px;margin-right: 350px;"> <el-select style="width: 50%;" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> <el-option v-for="item in option_time" :label=item.label :value="item.value "> </el-option> </el-select> </div> <div style="clear: both"></div> </div>```窗口缩小里面的今日有效单量：0单日期A：0单日期B：0单升幅： 0单 2025-03-16 对比日期B: 2025-03-17 当前对比位置发生错乱看不到了，要求是不要新代码在我的代码基础上修改，达到窗口缩小后依然全可以看到

03-18

注意到日期选择器、对比日期A/B等部分使用了float: left和固定的margin-left、padding-left，这些在窗口缩小时可能无法自适应，元素堆叠或溢出。可以考虑将这些元素包裹在一个flex容器中，利用flex的弹性布局来自动...

03-20

另外，检查是否有其他内联样式中的浮动和定位问题，比如`float: left`和`clear: both`的使用，可能需要替换为更现代的布局方式，或者确保它们不会干扰Flex布局。总结步骤： 1. 将左右容器包裹在Flex父容器中，...

<el-dialog v-model="reportView.reportViewFlag" title="报告" width="80%">  <Divider title="PM CheckList 报告" style="margin-bottom: 15px;"></Divider> <div style="margin-bottom: 15px;margin-left: 15px;"> <p v-for="(item, index) in (reportView.formModel.checkListFilePath || '').split(',')" :key="index"> <el-link :href="`${baseUrl}${item}`" :underline="true" target="_blank"> <span class="el-icon-document"> {{ getFileName(item) }} </span> </el-link> </p> </div>  <Divider title="PM 验证报告" style="margin-bottom: 15px;"></Divider> <div style="margin-bottom: 15px;margin-left: 15px;"> <p v-for="(item, index) in (reportView.formModel.pmReportFilePath || '').split(',')" :key="index"> <el-link :href="`${baseUrl}${item}`" :underline="true" target="_blank"> <span class="el-icon-document"> {{ getFileName(item) }} </span> </el-link> </p> </div> <div style='float: right'> <span style='color: black;font-size: 12px;color: gray'> <span style='margin-left: 15px;margin-top: 15px;display: inline-block'> {{ reportView.formModel.createBy }}:{{ reportView.formModel.uploadTime }} </span> </span> </div> <div style='clear: both'></div> </el-dialog>点击直接下载xlsx文件修改好完整的代码