2

Добрый день подскажите пожалуйста как сверстать div'ы таким образом: введите сюда описание изображения

чтоб не нужно было каждый див отдельно позиционировать?

3 ответа 3

3

а все вроде нашел вариант на grid, вот может кому-то поможет:

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item8 {
  grid-area: 1 / 2 / 3 / 4;
}
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
</div>

0
1

Сделано на flex:

div.container{
  width:120px;
  height:30px;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  align-items:start;
}
div.item{
  width:30px;
  height:15px;
  font-size:0;
  border:2px solid #000;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  box-sizing:border-box;
}
div.item:nth-child(3){
  height:30px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

С масштабом разберетесь сами надеюсь))

1

.block {
  width: 440px;
  height: 210px;
  border: 1px dotted #000;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
  
    .block div {
      border: 1px solid #000;
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 1px;
}
      
      .block div:nth-child(2) {
        height: 200px;
      }
      .block div:nth-child(5) {
        margin-top: -100px;
      }
      .block div:nth-child(6) {
         margin-top: -100px;
        margin-left: 106px;
      }
      .block div:nth-child(7) {
        margin-top: -102px;
        margin-left: 314px;
      }
  
<div class="block">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.