html css flex-box

279

29 июня 2021, 10:00

Подскажите как расположить изображения ?

<ul class="ul_cake_block">
                    <li class="li_cake_block li_cake">
                        <div class="block_title_img">
                            <h5 class="title_img">Классические</h5>
                            <span class="sub_title_img">24 вида</span>
                        </div>
                        <a href="#" class="link_img link_classic_cake">
                        </a>
                    </li>
                    <li class="li_cake_block">
                        <div class="block_title_img">
                            <h5 class="title_img">Муссовые</h5>
                            <span class="sub_title_img">12 видов</span>
                        </div>
                        <a href="#" class="link_img link_mus_cake">
                        </a>
                    </li>
                    <li class="li_cake_block">
                        <div class="block_title_img">
                            <h5 class="title_img">Свадебные</h5>
                            <span class="sub_title_img">20 видов</span>
                        </div>
                        <a href="#" class="link_img link_wedding_cake">
                        </a>
                    </li>
                    <li class="li_cake_block">
                        <div class="block_title_img">
                            <h5 class="title_img">Мужчинам</h5>
                            <span class="sub_title_img">12 видов</span>
                        </div>
                        <a href="#" class="link_img link_mans_cake">
                        </a>
                    </li>
                    <li class="li_cake_block li_cake">
                        <div class="block_title_img">
                            <h5 class="title_img">Женщинам</h5>
                            <span class="sub_title_img">16 видов</span>
                        </div>
                        <a href="#" class="link_img link_female_cake">
                        </a>
                    </li>
                    <li class="li_cake_block">
                        <div class="block_title_img">
                            <h5 class="title_img">Детские</h5>
                            <span class="sub_title_img">18 видов</span>
                        </div> 
                        <a href="#" class="link_img link_kids_cake">
                        </a>
                    </li>
                </ul>

Answer 1

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

Не очень понятно, речь идет о расположении элементов в сетке или об изображениях на фоне элементов.

Просто через тег <img> можно расположить. А название и ссылку через абсолютное позиционирование

Результат:

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  display: flex; 
  max-width: 800px; 
} 
 
.right-col { 
  flex-basis: 35%; 
  display: flex; 
  flex-direction: column; 
} 
 
.item { 
  position: relative; 
  margin: 5px; 
} 
 
img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
 
a { 
  position: absolute; 
  bottom: 20px; 
  right: 20px; 
  color: #fff; 
} 
 
.title { 
  position: absolute; 
  top: 20px; 
  left: 20px; 
  background: #fff; 
}

<div class="container"> 
  <div class="item"> 
    <div class="title"> 
      <h3>Классические</h3> 
      <p>24 вида</p> 
    </div> 
    <img src="https://picsum.photos/id/166/536/354" width="" height=""> 
    <a href="">Смотреть</a> 
  </div> 
  <div class="right-col"> 
    <div class="item"> 
      <div class="title"> 
        <h3>Классические</h3> 
        <p>24 вида</p> 
      </div> 
      <img src="https://picsum.photos/id/166/536/354" width="" height=""> 
    </div> 
    <div class="item"> 
      <div class="title"> 
        <h3>Классические</h3> 
        <p>24 вида</p> 
      </div> 
      <img src="https://picsum.photos/id/166/536/354" width="" height=""> 
    </div> 
  </div> 
</div>