HTML CSS kutu konumlandırması nasıl yapılır?

Endersqui · 31 Temmuz 2024

Merhaba, bir ürünlerimiz kısmı oluşturdum ve head ve sub diye ikiye ayırdım. Sub kısmını da left ve right diye ikiye ayırdım burada yapmak istediğim sub kısmında 2 tane kutu oluşturmak biri solda diğeri sağda olmak üzere. Daha sonra bu kutuların solda olanı products-box dediğim ana kutunun %25'ini sağdaki de %75'ini kaplamasını istiyorum. Konumlandırmak için yardım eder misiniz?

HTML:

<section class="products">
        <h1 class="heading">Ürünlerimiz</h1>
        <div class="products-container">
            <div class="products-box">
                <div class="products-box-head">
                    <img src="images/urun.jpeg" alt="Ürün">
                </div>
                <div class="products-box-sub">
                    <div class="sub-left">
                        sub left
                    </div>
                    <div class="sub-right">
                        sub right
                    </div>
                </div>
            </div>
            <div class="products-box">
               
            </div>
            <div class="products-box">
               
            </div>
        </div>
    </section>

CSS:

.products {
    background-color: #27374D;
}

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}

.products-box {
    position: relative;
    background-color: #fff;
    min-height:40rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 2rem;
}

.products-box-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 10rem);
    overflow: hidden;
    z-index: 1;
}

.products-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-box h1 {
    position: relative;
    z-index: 2;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-top: auto;
    padding: 1rem;
}

.product-box-sub {
    display: flex;
    gap: 1rem;
}

.sub-left {
    width: 25%;
    object-fit: cover;
    background-color: blue;
}

.sub-right {
    width: 75%;
    text-align: center;
    background-color: orange

}

HTML CSS kutu konumlandırması nasıl yapılır?

Endersqui

Centipat