天津网站设计诺亚科技_程序开发外包_千锋教育出来好找工作吗_爱站网ip反查域名

多个元素，先列后行排列

问题描述及解决方案

由于各个元素长短不一，如果使用flex或者grid布局，按照先行后列排列，就会出现下面这种空白（椭圆处）。

问题描述

解决方案

使用column布局，采用先列后行排列，可以避免出现大量的空白行

demo

<template><div class="test"><div class="list"><aside class="list_i" v-for="(item, idx) in children" :key="idx">{{ idx + 1 }} {{ item.title }}</aside></div></div>
</template><script>
export default {data() {return {children: [{ title: "Consultation" },{ title: "Planning and Designing" },{ title: "Clean Room & Special Ward Projects and Auxiliary Equipment" },{ title: "Hospital Logistics Transmission System and Auxiliary Equipment" },{ title: "Medical Gas Engineering and Auxiliary Equipment" },{ title: "Hospital Water System and Supporting Equipment System Solutions" },{ title: "Hospital HVAC Electrical and Weak Power System Construction Solutions" },{ title: "Laboratory Projects and Equipment Exhibition Area" },{ title: "Indoor Environment Decoration, Interior Design and Material Application Hospital Soft Furnishings and Furniture Equipment" },{ title: "Innovative Technical Solutions for Hospital Windows, Doors, Curtain Walls and Accessories" },{ title: "Green Hospital Building/Hospital Energy Saving Reconstruction and Operation Services" },{ title: "Smart Hospital System Solutions" },],};},mounted() {},methods: {},
};
</script><style lang="scss" scoped>
.test {padding: 40px;// column.list {border: 1px solid #f00;width: 600px;column-count: 2; /* 创建两列 */column-gap: 0; /* 设置列与列之间的间隙 */&_i {border: 1px solid #f00;padding: 10px;line-height: 2em;break-inside: avoid;}}//   grid//   .list {//     border: 1px solid #f00;//     width: 600px;//     display: grid;//     grid-template-columns: repeat(2, 1fr);//     &_i {//       border: 1px solid #f00;//       padding: 10px;//       line-height: 2em;//       break-inside: avoid;//     }//   }
}
</style>

如果你有更好的解决方案，欢迎指正，希望您不吝赐教