2

Пытаюсь сверстать вот этот блок введите сюда описание изображения

Сделал на flexbox но почемуто мне кажется что это бред:

.con {
    display: block;
    width: 80%;
    margin: 0 auto;



}
.imgs {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.left_imgs {
    margin-right: 30px;


}



.col2 {


    justify-content: space-between;
    display: flex;

}

.right_imgs {


    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.imgs img {
    display: block;
    max-width: 100%;
    height: auto;
}

 
    <section class="sec2">
        <div class="con">
            <div class="imgs">
                <div class="left_imgs ibox">

                    <img src="http://via.placeholder.com/540x540" alt="">


                </div>
                <div class="right_imgs">
                    <div class="col1 ibox">
      
                        <img src="http://via.placeholder.com/540x255" alt=""></div>
                    <div class="col2">

                        <div class="left_imgs2 ibox">
  
                            <img src="http://via.placeholder.com/255x255" alt="">
                        </div>
                        <div class="right_imgs2 ibox">
           
                            <img src="http://via.placeholder.com/255x255" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
Сам вопрос комплексный:

  1. Можно ли сверстать данный блок более легким правильным и кроссбраузерным способом?
  2. Почему не масштабируются изображения на IE по классу .imgs img в css?
  3. И наконец самый волнующий: Как сделать так чтобы на мобильных устройствах срабатывал медиа запрос и 3 изображения справа вставали под картинкой 540x540. Учил гриды и видел там подобное но ,во первых,услышал много советов о том что пока не стоит их юзать из за слабой кроссбраузерности а ,во вторых, интересно было узнать можно ли осуществить данную адаптивность более укоренившимися методами.(PS Слышал что есть в бутстрапе какая то сетка но от него я пока что совсем далек.)

Было бы приятно услышать разъяснение по этим вопросам. Заранее спасибо:)

2 ответа 2

2

Вы всегда можете сделать это методами "старой школы" JSfiddle (SCSS)

.parent {
  width: 100%;
}

.parent * {
  float: left;
  position: relative;
}

.parent * .inner {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.parent .rect:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.parent .left {
  width: 50%;
  background-color: red;
}

.parent .right-top {
  width: 50%;
  background-color: blue;
}

.parent .right-top:after {
  content: "";
  display: block;
  padding-bottom: 50%;
}

.parent .right-bottom {
  width: 25%;
  background-color: green;
}

.parent .right-bottom + .right-bottom {
  background-color: yellow;
}
<div class="parent">
  <div class="left rect">
    <div class="inner">
      First block
    </div>
  </div>
  <div class="right-top">
    <div class="inner">
      Second block
    </div>
  </div>
  <div class="right-bottom rect">
    <div class="inner">
      Third block
    </div>
  </div>
  <div class="right-bottom rect">
    <div class="inner">
      Fourth block
    </div>
  </div>
</div>

1

Приветствуем CSS GRID

    #greed {
        display: grid;
        grid-template-areas:
        'a a b b'
        'a a c d';
        grid-template-rows: 50vh 50vh;
        grid-template-columns: repeat(4, 1fr);
    }
    #a {
        grid-area: a;
        background-color: yellow;
    }
    #b {
        grid-area: b;
        background-color: green;
    }
    #c {
        grid-area: c;
        background-color: black;
    }
    #d {
        grid-area: d;
        background-color: red;
    }
<div id="greed">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

Ну а вопрос про IE уже стал мемом...

3
  • "Учил гриды и видел там подобное но ,во первых,услышал много советов о том что пока не стоит их юзать из за слабой кроссбраузерности"
    – midia
    28 июл 2018 в 17:35
  • Ну а вообще какого мнения вы на счет юзать иль не юзать
    – midia
    28 июл 2018 в 17:38
  • Номинально CSS Grid имеет полную поддержку браузерами, но по факту это Candidate Recommendation (CR), так что использовать его в продакшене не желательно 28 июл 2018 в 17:55

Ваш ответ

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

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