float排版对齐

悠悠 2022-12-15 03:50 154阅读 0赞

<view class="category">
            <view class="cate">
                    <view class="item" wx:for="{ {10}}">
                            <view class="pic"><image src="./../../images/category.png"></image></view>
                            <text>三全</text>
                    </view>
            </view>
            <view class="dot"></view>
    </view>
    
    
    
    .category{   box-sizing: border-box; width: 100%;  padding: 15rpx; }
    .category .cate{ width: 100%;box-sizing: border-box; overflow: hidden;}
    .category .cate .item{  float: left; text-align: center;margin: 15rpx; width: calc(20% - 30rpx);}
    .category .cate .item .pic{ width: 96rpx; height: 96rpx; border-radius: 6rpx; overflow: hidden;margin: 0 auto;}
    .category .cate .item .pic image{  width: 96rpx; height: 96rpx; object-fit: contain;}
    .category .cate .item text{  font-size: 24rpx; line-height: 36rpx;}
    .category .cate .dot{  width: 30rpx; height: 4rpx; border-radius: 2rpx; background: #f55b03;}

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20201015141856162.png\#pic\_center][https_img-blog.csdnimg.cn_20201015141856162.png_pic_center]

[https_img-blog.csdnimg.cn_20201015141856162.png_pic_center]: /images/20221123/801e73853a13466299b76c1eff74cec8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 float

CSS 之 float我们几乎想不出其他任何使文字环绕图片的效果，除了使用float概念float 将元素放在包含这个元素容器的左边或右边，并允许文本或行内元素包围这个元...

约定不等于承诺〃/ 2024年05月24日 03:56/ 0 赞/ 44 阅读

相关 css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平垂直居中对齐

阅读目录 CSS 布局 – Overflow overflow: visible overflow: hidden over

末蓝、/ 2023年10月06日 22:32/ 0 赞/ 56 阅读

相关数据结构对齐堆对齐栈对齐

good: [https://hps.vi4io.org/\_media/teaching/wintersemester\_2013\_2014/epc-14-haase-sv

桃扇骨/ 2023年08月17日 16:30/ 0 赞/ 106 阅读

相关 element table对齐表单对齐表头对齐表单不对齐

对齐前 ![在这里插入图片描述][20201231103349400.png] 对齐后 <style scoped> .el-table >>> t

曾经终败给现在/ 2023年01月01日 03:48/ 0 赞/ 193 阅读

相关 float排版对齐

<view class="category"> <view class="cate"> <view cl

悠悠/ 2022年12月15日 03:50/ 0 赞/ 155 阅读

相关 float

元素浮动的特性： 1、浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制 2、浮动的元素存在相互贴靠的效果，当宽度不够的时候，会出现自动换行 3、浮动的元素虽然脱离

蔚落/ 2022年11月13日 11:30/ 0 赞/ 165 阅读

相关 Bootstrap 排版

Bootstrap 排版实例 <!DOCTYPE html> <html lang="en"> <head> <meta ch

太过爱你忘了你带给我的痛/ 2022年08月23日 14:00/ 0 赞/ 200 阅读

相关 Bootstrap--排版

1.标题 Bootstrap中定义了所有的标题 2.内联子标题如果需要添加内联子标题，只需要简单的在元素两旁添加 <h1>我是标题1 h1. <smal

朴灿烈づ我的快乐病毒、/ 2022年08月22日 15:27/ 0 赞/ 225 阅读

相关 float

1、浮动：使元素脱离标准普通流，移动到其父元素中相应位置选择器{float:属性值;} left 元素向左浮动 right 元素

Myth丶恋晨/ 2022年06月14日 05:49/ 0 赞/ 168 阅读

相关 textView排版文字对齐

具有特殊字符半角全角字符时排版文字对齐 import android.content.Context; import android.graphics.Can

偏执的太偏执、/ 2022年05月20日 08:23/ 0 赞/ 325 阅读