Вопросы по верстке блока

153
04 октября 2018, 06:40

Пытаюсь сверстать вот этот блок

Сделал на 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 Слышал что есть в бутстрапе какая то сетка но от него я пока что совсем далек.)

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

Answer 1

Вы всегда можете сделать это методами "старой школы" 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>

Answer 2

Приветствуем 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 уже стал мемом...

READ ALSO
Как реализовать подобное меню [закрыт]
HTML

Как реализовать подобное меню [закрыт]

Как реализовать подобное меню так, чтобы было сходства как на макете?

 163
Помогите в конфигурации интернационализации Thymeleaf
HTML

Помогите в конфигурации интернационализации Thymeleaf

Не могу настроить чтение свойств из файла *properties, используя Thymeleaf:

 145
Фиксированная плашка в сайтбаре
HTML

Фиксированная плашка в сайтбаре

уважаемые знатоки! На сайте есть 2 колонки - контент и сайтбарВ сайтбаре есть плавающая плашка, которая сразу крепиться к низу экрана, а когда...

 147
Как исправить Uncaught SyntaxError: Unexpected identifier?
HTML

Как исправить Uncaught SyntaxError: Unexpected identifier?

 176