关于行太长，在在屏幕宽度变化的情况下将div换行的实现方式

最新推荐文章于 2024-09-19 11:25:25 发布

qq_42794520

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量1.1k

点赞数 1

文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/qq_42794520/article/details/106694110

版权

方法1.使用 float：left 属性来实现（屏幕变小后能自动换行）

效果如下：

正常情况
在这里插入图片描述
屏幕变小时候

  width: 250px;    //宽度写死
  float: left;     //每个框都要加这个浮动的属性，即可
  height: 50px;
  border: springgreen solid 1px;

方法2.使用ant-design-vue 或者 element 的From表单的属性

效果如下：
正常效果
在这里插入图片描述
屏幕变小

ant-design-vue

    <a-form layout="inline">  //在a-form上设置layout为inline即可
      <a-form-item
        label="签到组"
        v-if="personFlag"
      >
        <a-input
          placeholder="请选择签到组"
          class="table-header-input"
          @click="visible = true"
          v-model="namestring"
        />
        <SigninGroup
          v-model="visible"
          @changeSinGrouop="getChangeSinGrouop"
        />
      </a-form-item>
      ...
    </a-form>

方法3.使用响应式布局Grid（根据ant-design-vue官网）

<template>
  <a-row>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
      Col
    </a-col>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
  </a-row>
</template>