提问者:小点点

当我使用flexbox“Space-around”时,向右移动了一个块


我遇到了一个麻烦,我有三张卡片,我需要它们在页面的中心,块必须有相同的缩进。 我决定用Flexbox。 在这里,第三个在右边,我有一个卷轴:

这是我的html代码和这些块的css,有人能告诉我我做错了什么吗?

null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Четвертое задание</title>
</head>

<body>
    <div class="container">

        <div class="menu-container">
            <h1 class="main-header">Menu</h1>
            <div>
                <a href="index.html">Main page</a>
            </div>
            <div>
                <a href="./contacts/contacts.html">Contacts</a>
            </div>
        </div>

        <main>
            <div class="main-container">
                <div class="reasons">
                    <h2>Why do we do this?</h2>
                    <p class="paragraph">What was built to be the ultimate platform for the free sharing of knowledge
                        has
                        turned
                        into a money-hungry
                        monster feasting on our privacy and freedom.</p>
                    <p class="paragraph">But fear not, we have the answer! And it’s simple: An autonomous peer-to-peer
                        network
                        featuring
                        distributed storage powered by universal compression, accelerated scheduling allocation, and
                        end-to-end
                        encryption.</p>
                </div>

                <div class="product-info">
                    <h2>For whom?</h2>
                    <p class="paragraph">Our product is built for users, by users. You supply the storage, compute, and
                        networking
                        resources that
                        power our entire decentralized web.</p>
                </div>
            </div>
            <div class="what-we-do">
                <div class="card">
                    <img class="photo-card" src="./img/1stcard.jpg" alt="laptop">
                    <h4 class="fourth-head">Lenovo IdeaPad S145-15IGM</h4>
                    <p class="paragraph">
                        The Lenovo IdeaPad S145-15IGM is a reliable and easy-to-use entry-level laptop.</p>
                </div>

                <div class="card">
                    <img class="photo-card" src="./img/2ndcard.jpg" alt="laptop">
                    <h4 class="fourth-head">Acer Nitro 5 AN515-54-51CU</h4>
                    <p class="paragraph">
                        Acer Nitro 5 is ready to go on a journey with the owner, providing a solid filling at the
                        disposal of the gamer</p>
                </div>

                <div class="card">
                    <img class="photo-card" src="./img/3dcard.jpg" alt="monitor">
                    <h4 class="fourth-head">Samsung C24RG50FQI</h4>
                    <p class="paragraph">Samsung C24RG50FQI curved gaming monitor with a resolution of 1920 x 1080
                        pixels</p>
                </div>
            </div>
        </main>

      
    </div>
</body>

</html>

null

null

.what-we-do{
    border: 1px solid #356EAD;
    display: flex;
    justify-content: space-between;
}

.what-we-do .photo-card{
    width: 150px;
    height: 100px;
}
.card{
    height: max-content;
    border: 1px solid #1F3F68;
    border-radius: 6px;
}

null

提前感谢!)


共1个答案

匿名用户

尝试给what-we-do div宽度:100%