html – 如何在CSS中浮动div?

前端之家收集整理的这篇文章主要介绍了html – 如何在CSS中浮动div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在 HTML中有这个列表,我想按列排序.我试过使用它给我的浮点数:

编辑:
这些< li>的高度是未定义的,但我想C以下B,E以下E和G在F以下,而不改变结构和改变顺序.我不想使用位置绝对.我想知道是否还有其他解决方案.

HTML:

<ul>
   <li class="item">A</li>
   <li class="item">B</li>
   <li class="item">C</li>
   <li class="item">D</li>
   <li class="item">E</li>
   <li class="item">F</li>
   <li class="item">G</li>
<ul>@H_403_8@ 
 

OUTPUT(使用float:left; width:240px; border-left:1px solid #EEE):

我想要的更像下面这样,而不改变HTML,因为我已经使用这个结构做出响应.

可能吗 ?

解决方法

您可以在第一个LI标签 like this上使用列CSS和margin-bottom.
ul {
     column-count:4;
     padding:0;
     column-rule: solid lightgray 1px;
}

li {
     display:inline-block;
     width:100%;
}

li:before {/* demo purpose to set an height to lis */
     content:'';
     float:left;
     padding-top:50%;
}

li:first-of-type {
     margin-bottom:50%;
}@H_403_8@ 
 

您可能需要一个JavaScript前缀或手动添加供应商前缀.

原文链接:https://www.f2er.com/html/230499.html

猜你在找的HTML相关文章