帆先生

为什么浮动的时候最后一个图片或者div里的内容会不对其

时间:2021-07-23 13:12 作者:风月 点击:
为什么浮动的时候最后一个图片或者div里的内容会不对其。
 
可能是因为父级元素影响
 
比如:有一个div里面是一个ul的内容列表,哪我在其div里面设置,一个line-height后,内容的排列会出现问题

<div class="article-left-tag">
       <ul class="e2">
              {dede:list orderby='sortrank' pagesize='10'}
                     <li class="tag-li-1">
     
                     <a href="[field:arcurl/]" class="title-tag">[field:title/]</a>
       <span class="info">
              <small>日期:</small>[field:pubdate function="GetDateTimeMK(@me)"/]
              <small>点击:</small>[field:click/]
       </span>
 
                    </li>
              {/dede:list}
       </ul>
</div>

css:

.article-left-tag {
  1. float: left;
  2. width: 75%;
  3. background-color: #484848;
  4. line-height: 3rem;
  5. box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);

效果:

 
这样设置会发现后面日期浮动或,最后一个内容会导致排列错位,主要是由于class属性article-left-tag这里设置了一个行高导致的,去掉line-height:属性,就可以了,想要增加行之间的距离可以这种内边距或者外边距,来达到我们想要的效果
  • 浮动   
  • 免责声明:本文来自网络,不代表帆先生立场,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站管理员处理。 转载请注明出处:http://www.focusonseo.cn/CSS/89.html

    上一篇:图片怎么让他自适应div大小

    下一篇:css3中属性前缀

    网站支持:帆先生 渝ICP备20001430号-1