温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在css中使用float属性

发布时间:2021-04-01 16:55:27 来源:亿速云 阅读:137 作者:Leah 栏目:web开发

怎么在css中使用float属性?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

1:在页面布局中,假设有两个div,需求是两个div在同一排上;其中解决办法之一就是利用浮动,

eg:

XML/HTML Code复制内容到剪贴板

  1. <li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;">  
                        <div class="g-position_a">职位简介</div>  
                        <div class="g-position_b">  
                            <dl class="g-position_list fl">  
                                <dd>职位名称:php工程师</dd>  
                                <dd>工作经验:1-3年</dd>  
                                <dd>招聘人数:10人</dd>  
                                <dd>最低学历:不限</dd>  
                            </dl>  
      
                            <dl class="g-position_list fr">  
                                <dd>月薪:3000-5000元(个税计算)</dd>  
                                <dd>年龄:不限</dd>  
                            </dl>  
                        </div>  
                           
     </li>  
      
    <div class="box" style="width:300px;height:300px;></div>

2:上述代码因为li里的两个div左右浮动(脱离了文档流),li将不具备有“页面表现”的高度,所以li上下边框线就会重合,

li其后的class名为box的div就会冒上来;

此刻的解决办法是在其两个浮动的子div后面添加一个消除浮动的div,此时li所因为"内部元素撑开"所存在的高度就会在页面中重新表现出来;

eg:

XML/HTML Code复制内容到剪贴板

  1.      <li>  
                        <div class="g-position_a">职位简介</div>  
                        <div class="g-position_b">  
                            <dl class="g-position_list">  
                                <dd>职位名称:php工程师</dd>  
                                <dd>工作经验:1-3年</dd>  
                                <dd>招聘人数:10人</dd>  
                                <dd>最低学历:不限</dd>  
                            </dl>  
      
                            <dl class="g-position_list">  
                                <dd>月薪:3000-5000元(个税计算)</dd>  
                                <dd>年龄:不限</dd>  
                            </dl>  
                        </div>  
                        <div class="clearfix"></div>  
                 </li>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI