2

введите сюда описание изображения

Нужно, чтобы последняя статья ( белый блок ) находился под картинкой ( черный блок ), как сделать наиболее лаконичным способом?
HTML так же можно поменять, если разметка не правильная

body {
  margin: 0;
  background: #f0f0f0;
}

.wrapper {
  display: flex;
  margin: 20% 20%;
}

.img {
  width: 300px;
  height: 300px;
  margin-right: 20px;
  background: gray;
}

.item {
  width: 300px;
  height: 85px;
  background: #fff;
  margin-bottom: 20px;
}
<div class="wrapper">
  <div class="img"></div>
  <div class="articles">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

3
  • В вашем случае правильней float использовать, без flex. Тогда будет то поведение по умолчанию которого вы хотите добиться. Либо посмотреть в сторону свойств семейства columns 22 мар 2020 в 17:06
  • @Sevastopol' да, давай
    – daladn0
    22 мар 2020 в 17:15
  • @Sevastopol' да, спасибо!
    – daladn0
    29 мар 2020 в 17:22

1 ответ 1

0

На мой взгляд, самое лучшее решение на CSS с использованием свойств inline-block и float.

Полностью адаптивно.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  overflow: hidden;
  padding: 2%;
  background-color: #f2f0f2;
}

.wrp__left, .wrp__right {
  display: inline-block;
  float: left;
}

.wrp__left {
  width: 49%;
}

.wrp__right {
  float: right;
  width: 49%;
}

.block {
  width: 100%;
  padding: 50% 0;
  background-color: #818081;
}

.wrp {
  width: 100%;
  padding: 0;
}

.block__wrp__01, .block__wrp__02, .block__wrp__03, .block__wrp__04 {
  display: inline-block;
  float: left;
  width: 100%;
}

.block__01, .block__02, .block__03, .block__04 {
  width: 100%;
  padding: 15% 0;
  background-color: #ffffff;
}

.block__02, .block__03, .block__04 {
  margin-top: 5%;
}

@media screen and (max-width: 600px) {
  .wrp__left,
  .wrp__right {
    width: 100%;
    float: none;
  }
  .block__01 {
    margin-top: 4%;
  }
}
<div class="wrapper">
  <div class="wrp__left"><div class="block"></div></div>
  <div class="wrp__right">
    <div class="wrp">
      <div class="block__wrp__01"><div class="block__01"></div></div>
      <div class="block__wrp__02"><div class="block__02"></div></div>
      <div class="block__wrp__03"><div class="block__03"></div></div>
      <div class="block__wrp__04"><div class="block__04"></div></div>
    </div>
  </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.

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