jquery-weui 栅格布局_weui layout布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41835967/article/details/83689833

本文深入探讨了栅格布局的两种类型：有间距和无间距。通过具体实例展示了不同列宽的布局效果，包括布局的自动调整、换行及间距处理。特别注意，某些列宽值可能导致布局异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

栅格布局类型

关于栅格布局：根据间距可分为两种类型，有间距和无间距

类型一：默认，有间距

<div class="weui-row">
  <div class="weui-col-20">20</div>
  <div class="weui-col-20">20</div>
  <div class="weui-col-20">20</div>
  <div class="weui-col-20">20</div>
  <div class="weui-col-20">20</div>
</div>

<div class="weui-row">
  <div class="weui-col-33">33</div>
  <div class="weui-col-33">33</div>
  <div class="weui-col-33">33</div>
</div>

<div class="weui-row">
  <div class="weui-col-50">50</div>
  <div class="weui-col-50">50</div>
</div>

手机模型，效果：

每一个weui-col 添加边框用于看清每个div的边界，如下

效果图：有间距

类型二：无间距

在weui-row 添加weui-no-gutter

<div class="weui-row weui-no-gutter">
  <div class="weui-col-50">50</div>
  <div class="weui-col-50">50</div>
</div>

效果图：

添加边框，看的更加清楚，此时是没有间距的：

关于栅格布局

现在以无间距的栅格布局作为例子

<div class="weui-row weui-no-gutter ">
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
</div>

修改weui-col-？

<div class="weui-row weui-no-gutter ">
    <div class="weui-col-5" style="border: 1px solid red">5</div>
    <div class="weui-col-10" style="border: 1px solid red">10</div>
    <div class="weui-col-15" style="border: 1px solid red">15</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-50" style="border: 1px solid red">50</div>
</div>

效果图：

此时总值为100

当col总值小于100（这里是90）时，会出现间距而不会自动根据比例调节布局

<div class="weui-row weui-no-gutter ">
    <div class="weui-col-5" style="border: 1px solid red">5</div>
    <div class="weui-col-10" style="border: 1px solid red">10</div>
    <div class="weui-col-15" style="border: 1px solid red">15</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-40" style="border: 1px solid red">40</div>
</div>

当col总值大于100时，会自动换行，不足100的部分依旧存在间距

<div class="weui-row weui-no-gutter ">
    <div class="weui-col-5" style="border: 1px solid red">5</div>
    <div class="weui-col-10" style="border: 1px solid red">10</div>
    <div class="weui-col-15" style="border: 1px solid red">15</div>
    <div class="weui-col-20" style="border: 1px solid red">20</div>
    <div class="weui-col-40" style="border: 1px solid red">40</div>
    <div class="weui-col-15" style="border: 1px solid red">15</div>
</div>

当值为10 30 30 30时出现布局问题，col-30的大小是字符的大小

<div class="weui-row weui-no-gutter">
    <div class="weui-col-10" style="border: 1px solid red">10</div>
    <div class="weui-col-30" style="border: 1px solid red">30</div>
    <div class="weui-col-30" style="border: 1px solid red">30</div>
    <div class="weui-col-30" style="border: 1px solid red">30</div>
</div>