Question

我正在为一些朋友之间的项目进行前端开发。

他正在构建支持的rails并且有模板可以生成产品并放入内容但是我遇到了一个我不确定如何使它们正确对齐的情况？

这是一个基于网络的平台。

这是产品的情况。我有三个例子。我创建了一个容纳它们的产品容器。我有第一个显示完美，然后当我复制粘贴另外两个（只是为了看到它们），他们不会生成。

<div class="main-bkg">
    <div class="card-row">
        <div class="product-cont">
            <div class="product-holder">
                <div class="product-img"> <img src="img/box.jpg"> </div>
                <div class="product-name">prod1</div>
                <div class="product-info">
                    <div class="product-price">$99</div>
                    <div class="sep">-</div>
                    <div class="product-desc">box</div>
                </div>
                <div class="product-qty">
                    <div class="qty-sub">-</div>
                    <div class="qty-amount">1</div>
                    <div class="qty-add">+</div>
                </div>
            </div>
        </div>
        <div class="product-cont">
            <div class="product-holder">
                <div class="product-img"> <img src="img/circle.jpg"> </div>
                <div class="product-name">prod2</div>
                <div class="product-info">
                    <div class="product-price">$99</div>
                    <div class="sep">-</div>
                    <div class="product-desc">circle</div>
                </div>
                <div class="product-qty">
                    <div class="qty-sub">-</div>
                    <div class="qty-amount">1</div>
                    <div class="qty-add">+</div>
                </div>
            </div>
        </div>
        <div class="product-cont">
            <div class="product-holder">
                <div class="product-img"> <img src="img/tri.jpg"> </div>
                <div class="product-name">prod3</div>
                <div class="product-info">
                    <div class="product-price">$99</div>
                    <div class="sep">-</div>
                    <div class="product-desc">triangle</div>
                </div>
                <div class="product-qty">
                    <div class="qty-sub">-</div>
                    <div class="qty-amount">1</div>
                    <div class="qty-add">+</div>
                </div>
            </div>
        </div>
    </div>
</div>

css是在SASS中构建的，我会在其中发布以便于阅读。如果你想要css导出我可以显示它。

我认为它们是重叠的。我不能完全确定一个简单的工作，然后给每个产品一个特殊的ID，然后应用样式。

.main-bkg {
    padding-top: 165px;
    height: 100vh;
    background-color: #ebf0f1;
    .card-row {
        padding-top: 15px;
        padding-bottom: 15px;
        .product-cont {
            padding-left: 30px;
            padding-right: 30px;
            .product-holder {
                background-color: white;
                height: 350px;
                width: 200px;
                border-radius: 20x;
                .product-img {
                    img {
                        display: block;
                        height: 240px;
                        width: 170px;
                        margin-left: auto;
                        margin-right: auto;
                        padding-top: 15px;
                    }
                }
                .product-name {
                    text-align: center;
                }
                .product-info {
                    display: block;
                    height: 30px;
                    width: 100px;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    font-weight: 700;
                    .product-price {
                        display: inline-block;
                        text-align: center;
                        float: left;
                    }
                    .sep {
                        display: inline-block;
                        text-align: center;
                    }
                    .product-desc {
                        display: inline-block;
                        text-align: center;
                        float: right;
                    }
                }
                .product-qty {
                    display: block;
                    border-radius: 3px;
                    border: 1px solid $prime-color;
                    margin-left: auto;
                    margin-right: auto;
                    width: 100px;
                    .qty-sub {
                        color: $prime-color;
                        display: inline-block;
                        float: left;
                        width: 30px;
                        height: 25px;
                        text-align: center;
                    }
                    .qty-amount {
                        display: inline-block;
                        color: $prime-color;
                        font-size: 20px;
                        text-align: center;
                        width: 40px;
                        height: 25px;
                    }
                    .qty-add {
                        color: $prime-color;
                        display: inline-block;
                        text-align: center;
                        float: right;
                        width: 30px;
                        height: 25px;
                    }
                }
            }
        }
    }
}

Answer 1

您是否尝试在容器中放置 float：left 以让容器浮动？

.product-cont {
  padding-left: 30px;
  padding-right: 30px;
  float: left;
}

检查这个带有SASS的here是否可以解决您的问题

显示内联产品 - 需要特殊ID？

1 个答案: