CSS 中的包装元素

Question

我正在尝试以这种方式包装元素以实现响应式布局。几乎用 float:left、flexbox、display:inline-block 尝试了所有东西，但可以让它工作

希望可以做到CSS 如果需要，元素可以指定宽度

[aaaaaaaa] [bbbbbbbbbb] [ccccccccccc]
           [dddd]

[aaaaaaaa] [bbbbbbbbbb]
           [ccccccccccc]
           [dddd]

[aaaaaaaa]
[bbbbbbbbbb]
[ccccccccccc]
[dddd]

我有这段代码，它是问题的核心。

<html>
<head>
    <style>
        .container {
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
        }
        .innercontainer {
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
        }
        .box {
            margin-right:10px;
            padding:5px;
            background-color:#ddd;
            border:1px solid black;
        }
        .innerbox {
            margin-right:10px;
            padding:5px;
            background-color: #9e9;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
        <div class="innercontainer">
            <div class="innerbox">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
            <div class="innerbox">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
            <div class="innerbox" style="flex:0 0 300px">ddddddddddddddddddd</div>
        </div>
    </div>
</body>
</html>

谢谢

Answer 1

您可以通过 display: grid 实现所需的布局。基本上在网格模板行上，您可以定义列在每一行上的排序方式：

.container {
  display: grid;
  grid-template: "a b c" auto "a d c" auto;
}

@media (max-width: 480px) {
  .container {
    grid-template: "a b" auto "a c" auto "a d" auto;
  }
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.container div {
  padding: 5px;
  background-color: #9e9;
  border: 1px solid black;
}

<div class="container">
  <div class="a">AAAA</div>
  <div class="b">BBBBB</div>
  <div class="c">CCCCC</div>
  <div class="d">ddddd</div>
</div>

您可以根据需要调整或添加新的媒体查询。

CSS 中的包装元素

Wrapping elements in CSS

html

css

responsive