0

У меня есть карточки товара, когда я их соединяю они идут по вертикали хотя мне нужно чтобы шли по горизонтали. Как это сделать?

<div class="product-wrap">
    <div class="product-item">
        <img src="https://i.imgur.com/VfLQata.png" alt="">
        <div class="product-buttons">
            <a href="#" class="button">В корзину</a>
        </div>
    </div>
    <div class="product-title">
        <a href="#">Тест 1</a>
        <span class="product-price">₽ 1999</span>
    </div>

    <div class="product-item">
        <img src="https://i.imgur.com/VfLQata.png" alt="">
        <div class="product-buttons">
            <a href="#" class="button">В корзину</a>
        </div>
    </div>
    <div class="product-title">
        <a href="#">Тест 2</a>
        <span class="product-price">₽ 1999</span>
    </div>
</div>
* {
    box-sizing: border-box;
}
.product-wrap {
    width: 300px;
    margin: 0 auto;
    background: white;
    padding: 0 0 20px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}
.product-item {
    position: relative;
    overflow: hidden;
}
.product-wrap img {
    display: block;
    width: 100%;
}
.product-buttons {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: .3s ease-in-out;
}
.button {
    text-decoration: none;
    color: #c0a97a;
    font-size: 12px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid #c0a97a;
    transform: translate(-50%, -50%) scale(0);
    transition: .3s ease-in-out;
}
.button:before {
    content: "\f07a";
    margin-right: 10px;
}
.product-item:hover .product-buttons {
    opacity: 1;
}
.product-item:hover .button {
    transform: translate(-50%, -50%) scale(1);
}
.button:hover {
    background: black;
}
.product-title {
    color: #5e5e5e;
}
.product-title a {
    text-decoration: none;
    color: #2e2e2e;
    font-weight: 600;
    margin: 15px 0 5px;
    padding-bottom: 7px;
    display: block;
    position: relative;
    transition: .3s ease-in-out;
}
.product-title a:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    background: #2e2e2e;
    left: 50%;
    margin-left: -20px;
    bottom: 0;
    transition: .3s ease-in-out;
}
.product-title a:hover {
    color: #c0a97a;
}
.product-title:hover a:after {
    background: #c0a97a;
}
.product-price {
    font-size: 20px;
    color: #c0a97a;
    font-weight: 700;
}

Тестировал разные варианты - толку ноль. Спасибо заранее

1 ответ 1

0

.product-item и .product-title обернуть еще в один div. Далее, этому диву применить, например display: inline-block;

Но я бы использовал flexbox. Также оборачиваете .product-item и .product-title обернуть еще в один div, а .product-wrap применяете display: flex;

<div class="product-wrap">
    <div>
        <div class="product-item">
            ....
        </div>
        <div class="product-title">
            ....
        </div>
    </div>

    <div>
        <div class="product-item">
            ...
        </div>
        <div class="product-title">
            ...
        </div>
    </div>
</div>

<style>
    .product-wrap {
        ...
        display: flex;
    }
</style>
2
  • А можете обвернуть? Я как только не обворачивал по первому способу, не получалось
    – Master
    30 мар 2022 в 7:52
  • Прикалываетесь чтоли? ... поправил свой ответ добавив html код
    – Firsov36
    30 мар 2022 в 9:48

Ваш ответ

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

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