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

最新推荐文章于 2023-12-01 14:15:57 发布

qq_42794520

最新推荐文章于 2023-12-01 14:15:57 发布

阅读量1.2k

点赞数 1

文章标签： css vue.js javascript

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

版权

本文介绍三种实现响应式布局的方法：使用CSS float属性使元素在屏幕缩小时自动换行；利用ant-design-vue或Element UI的Form组件属性实现响应式表单；采用ant-design-vue的Grid布局组件，根据不同屏幕尺寸调整列宽。

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

方法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>