Как обрезать последний элемент?

Question

[Daniil]

Есть макет с каруселью. Насчёт JS мне всё понятно код напишу сам , но как сделать так чтобы последний элемент обрезался как на фото.
Если использую flex то элементы подстраиваются в не зависимости от указанных размеров , а если не использую то они не хотят группироваться в строку. Вот код самой вёрстки https://codepen.io/Daniil-chaynik/pen/LYWYppa
Знаю что на codepen полно таких работ но они используют не понятный мне код.

Answer 1

[Рома Зварич]

В будущем просьба выкладывать рабочий код со стилями в Codepen.

"чтобы последний элемент обрезался как на фото"

"Как на фото" - это как?

Попытался угадать.
Добавьте родителю overflow-x: auto; - это если с прокруткой нужно.
https://codepen.io/hisbvdis/pen/OJpJVPq


Если нужно без горизонтальной прокрутки - overflow-x: hidden;
https://codepen.io/hisbvdis/pen/NWpWqbW


P.S. Тег <h1> на странице может быть только один - заголовок страницы. Остальные - <h2> - <h6>

Comments

[Daniil]

Рома Зварич https://codepen.io/Daniil-chaynik/pen/LYWYppa

[Рома Зварич]

Daniil, не используйте float
Данное свойство предназначено не для раскладки страницы.
Обратите внимание на современный Flexbox

[Daniil]

Рома Зварич да знаю я решил попробовать код ниже думал сработает

Answer 2

[Денис Самофалов]

.carousel {
  width: 100%;
  overflow: hidden;
}
.carousel .layer {
  width: 1000px;
}
.carousel .layer a {
  display: block;
  float: left;
}

<div class="carousel" >
  <div class="layer">
            <a href="#">
                <img src="./image/carousel-1.png" alt="">
                <h1>Choosing your office furniture in 2021</h1>
                <span>There's more to office space design than just choosing the layout, colors, and decor of your space. You also need to choose the right office furniture</span>
            </a>
            <a href="#">
                <img src="./image/carousel-2.png" alt="">
                <h1>How to Choose Furniture For Your Office</h1>
                <span>There's a lot of thought that goes into choosing the furniture for your office. The last thing you want to do is choose furniture that's uncomfortable...</span>
            </a>
            <a href="#">
                <img src="./image/carousel-3.png" alt="">
                <h1>Choosing The Right Office Chair</h1>
                <span>You're going to be a long period of time behind your desk, so it's important to choose the right office desk chair for your commercial...</span>
            </a>
            <a href="#">
                <img src="./image/carousel-4.png" alt="">
                <h1>Choosing The Right Office Chair</h1>
                <span>You're going to be a long period of time behind your desk, so it's important to choose the right office desk chair for your commercial...</span>
            </a>
   </div>
 </div>

Comments

[Daniil]

Денис Самофалов всё равно не получается https://codepen.io/Daniil-chaynik/pen/LYWYppa