Обтекание элементов в CSS - PullRequest
Новая
       6

Обтекание элементов в CSS

0 голосов
/ 22 сентября 2019

Я пытаюсь обернуть элемент таким образом для адаптивного макета.Опробовал почти все с помощью 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>

Спасибо

1 Ответ

1 голос
/ 22 сентября 2019

Вы можете достичь желаемого макета с помощью 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>

Вы можете настроить или добавить новый медиа-запрос в соответствии с вашими потребностями.

...