时间戳

首页 > 解决方案 > 如何将弯曲方向固定为行

html - 如何将弯曲方向固定为行

问题描述

我有一个小问题，当由于某种原因在主容器中使用 display flex 不起作用时。

弯曲方向始终在列中。我已经在寻找各种解决方案，但找不到适合我的解决方案。也许这可能是一个愚蠢的错误，我没有意识到，我寻求帮助。

    .box-container a{
        color: var(--goatred-color);
    }
    
    .box-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background: #ccc;
    }
    
    .box{
        flex: 1 1 300px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
        margin: 20px;
    }
    
    .box .image{
        padding: 10px;
        background: #eee;
        text-align: center;    
    }
    
    .box .image img{
        height: 200px;
        width: 250px;
        object-fit: cover;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
    }
    
    
    .box .title .info{
        padding: 10px;
        color: #666;
        font-size: 20px;
    }
    
    .box .info .subInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 10px;
    }
<div class="box">
            
            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>


            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>


            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>


            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>

标签： htmlcssflexbox

解决方案

两个问题：

  1. 你有一个盒子元素，我相信你的意图是让许多盒子作为元素表现得像行。我添加了这个 HTML 修复。
  2. 我稍微修改了内容的填充左对齐，看看每个盒子的标题和价格是如何不左对齐的。

如果您同意该解决方案，那就太好了。如果您不同意，我恳请您查看更改并尝试根据您的需要进行修改。

注意：将代码片段扩展到全宽，您指定了 300 像素宽的弹性框，因此您需要在更宽的屏幕尺寸中查看它。

.box-container a {
    color: var(--goatred-color);
}
    
    .box-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background: #ccc;
    }
    
    .box{
        flex: 1 1 300px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
        margin: 20px;
    }
    
    .box .image{
        padding: 10px;
        background: #eee;
        text-align: center;    
    }
    
    .box .image img{
        height: 200px;
        width: 250px;
        object-fit: cover;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
    }
    
    
    .box .info{
        padding: 10px;
        color: #666;
        font-size: 20px;
    }
    
    .box .info .subInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
<div class="box-container">

        <div class="box">
            
            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>
        </div>

        <div class="box">

            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>
        </div>

        <div class="box">

            <div class="image">
                <img src="img/Jer1s.png" alt="">
            </div>

            <div class="info">
                <h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
                <div class="subInfo">
                    <div class="price">₡14.900</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half"></i>
                    </div>
                </div>
            </div>

            <div class="overlay">
                <a href="" style="--i:1;" class="fas fa-shopping-cart"></a>
                <a href="" style="--i:2;" class="fas fa-heart"></a>
                <a href="" style="--i:3;" class="fas fa-search"></a>
            </div>
        </div>
</div>

推荐阅读