0

как передвинуть нижний блок наверх? проблема

вот мой код

        <div class="section__news">
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block grand-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
        </div>
        & .section__news-block
        height: 200px
        width: calc((100% / 4) - 4px)
        background-size: cover
        display: inline-block
        transition: .2s ease
        &:nth-child(3n + 1)
            background-image: url(../img/img-1.jpg)
        &:nth-child(3n + 2)
            background-image: url(../img/img-2.jpg)
        &:nth-child(3n + 3)
            background-image: url(../img/img-3.jpg)
        &.grand-block
            width: calc((100% / 2) - 4px)
            height: 500px
1
  • 1
    Изучайте grid'ы или хотя бы flex'ы чтобы не выдумывать велосипед. 30 июн 2020 в 19:53

1 ответ 1

1

введите сюда описание изображения> Там много чего нужно доделать

.section__news {
    display: flex;
    flex-wrap: wrap;
}
.section__news-block {
    height: 200px;
    width: calc(100% / 4);
    transition: .2s ease;
}
.section__news-block:nth-child(3n + 1) {
    background: url(img/1.jpg) 50% 50%/cover no-repeat; 
}
.section__news-block:nth-child(3n + 2) {
    background: url(img/2.jpg) 50% 50%/cover no-repeat;
}
.section__news-block:nth-child(3n + 3) {
    background: url(img/3.jpg) 50% 50%/cover no-repeat;
}
.grand-block {
    height: 500px;
    width: 100%;
}
.box, .one {
    width: 100%;
}
.box {
    display: flex;
}
.wrapper__one, .wrapper__two {
    display: flex;
    height: 300px;
}
.two {
    width: 100%;
}


<div class="section__news">
  <div class="section__news-block"></div>
  <div class="section__news-block"></div>
  <div class="section__news-block"></div>
  <div class="box">
    <div class="section__news-block grand-block"></div>
    <div class="one">
      <div class="wrapper__one">
        <div class="section__news-block two"></div>
        <div class="section__news-block two"></div>
      </div>
      <div class="wrapper__two">
        <div class="section__news-block two"></div>
        <div class="section__news-block two"></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.

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