chatGpt 都解决不了,来大佬看下这种布局如何实现?

发布于
2023-04-23 浙江

<html>

<body>
  <div id="app">
    <div class="parent">
      <div class="child" v-for="item in 23">
        hello world
      </div>
    </div>
  </div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var vm = new Vue({
  el: '#app'
})
</script>
<style type="text/css">
.parent{
  display: flex;
  flex-wrap:wrap;
}
.parent .child{
  flex-grow: 1;
  height:100px;
  display: flex;
  justify-content: center;
  align-items:center;
  border:1px solid red;
  min-width: 200px;
  max-width: 300px;
  margin:5px;
}
</style>

直接上代码

要求如下

parent 不固宽, 两边不允许有多余的留白
每个 child 的宽度必须相等 (题主最后的 div 不等宽了...)
必须纯 css 实现

前端 css css3

阅读 3.1k

8 个回答

得票最新

unicreators

9381314

发布于
2023-04-23 北京

每行5列，不足的补几个空元素占位

littlelyon

7.9k3927

发布于
2023-04-24 日本

更新于
2023-04-24

不就是这样吗？

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  gap: 4px;
}

.item {
  border: 1px solid red;
}

我这里用了 auto-fit 而不是 auto-fill 的原因是因为你说要不留白，所以用 auto-fill 会在宽度足够大（能把所有子元素放到一行）的时候留白，如下图（上面是 auto-fit 下面是 auto-fill）：

max-width: 300px 这个实现需求和不留白是冲突的，因为你要不留白，就注定在平缓的响应式变化中，将空白分配给其他子元素，但限制了最大宽度时，这些子元素就不一定能均分空白空间了，除非是干预了响应式的变化过程，比如变成非平缓的拖拽方式。

另外一个原因就是，响应式设计应当只声明下限，而非上限，因为上限会隔断流式布局。

zhou

794127

发布于
2023-04-23 湖北

如果不使用grid的话, 也可以使用在parent里面填充其他标签进行占位设置他的高为0 所以不会影响垂直的结构

hmtl


      <div class="child" v-for="item in 23">
        hello world
      </div>
      <i> hello world</i><i> hello world</i>
      <i> hello world</i>
      <i> hello world</i>
     <i> hello world</i>
     <i> hello world</i>
     <i> hello world</i>
      <i> hello world</i>

css

  .parent {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .parent .child, i {
    flex-grow: 1;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    min-width: 200px;
    max-width: 300px;
  }
  .parent> i {
    overflow: hidden;
    height: 0;
    border: none;
  }

Meathill

22.6k133642

发布于
2023-04-23 广东

用 grid 布局就很简单。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

643104191

2.5k21137

发布于
2023-04-23 广东

在父容器插个after伪类即可，
伪类的宽度这么写，具体::after样式,nth-child(5n+x)和width自己写

.parent::after:nth-child(5n+2){
    width: 80%;
}
.parent::after:nth-child(5n+3){
    width: 60%;
}
.parent::after:nth-child(5n+4){
    width: 40%;
}
.parent::after:nth-child(5n+5){
    width: 20%;
}

chatgpt解决不了是因为你没和ta描述清楚

uccs

7591327

发布于
2023-04-24 上海

不要写 max-width: 300px; 就好了

利剑藏锋

6.2k2620

发布于
2023-04-24 北京

在flex布局容器中, 添加和真实的元素相同数量的空div就行,
这些空div会把宽给撑起来, 也不占空间.
比如

<div class="d-flex">
    <div>真子元素</div>
    <div>真子元素</div>
    <div>真子元素</div>
    <div></div><!-- 添加几个 -->
    <div></div><!-- 添加几个 -->
    <div></div><!-- 添加几个 -->