Question

我创建了一个父Div，其中有3个子Div。我希望3个Divs中的每一个都位于同一列上，但要在屏幕中央以10px的距离将边框彼此分开，同时仍将3个框保持在屏幕中央。

我对CSS3有一个非常基本的了解

#prices {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        margin: auto;
    }



    #tenor,
    #bass,
    #valvet {
        border: 1px solid;
        width: 100%;
        max-width: 360px;
        height: 330px;
        text-align: center;
        margin: 10px;

    }

    #tenor {
        justify-self: end;

    }

    #bass {
        justify-self: center;

<!-- Beginning of HTML5 Code -->


    <div id="prices">
        <div id="tenor">
            <h3>TENOR TROMBONE</h3>
            <h4>$600</h4>
            <p>
                Lorem ipsum.<br>
                Lorem ipsum.<br>
                Lorem ipsum dolor.<br>
                Lorem ipsum.
            </p>
            <button class="btn">Select</button>

        </div>

        <div id="bass">
            <h3>BASS TROMBONE</h3>
            <h4>$900</h4>
            <p>
                Lorem ipsum.<br>
                Lorem ipsum.com<br>
                Lorem ipsum dolor.<br>
                Lorem ipsum.
            </p>
            <button class="btn">Select</button>

        </div>

        <div id="valvet">
            <h3>VALVET TROMBONE</h3>
            <h4>$1200</h4>
            <p>
                Plays similar to a Trumpet.<br>
                Great for Jazz Bands.<br>
                Lorem ipsum.
                <p><button class="btn">Select</button>
                </p>
        </div>


    </div>

使用上面的代码，所有内容都完美地居中，但是3个框之间的每个框之间都存在巨大差距。如何消除间隙，但要确保间隙仍相对于屏幕居中？

谢谢。

Answer 1

您可以使用CSS flex属性来实现此目的

JSFiddle

<html>
<head>
<style>
 #prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
</style>
<body>
<div id="prices">
<div id="tenor">
    <h3>TENOR TROMBONE</h3>
    <h4>$600</h4>
    <p>
        Lorem ipsum.<br>
        Lorem ipsum.<br>
        Lorem ipsum dolor.<br>
        Lorem ipsum.
    </p>
    <button class="btn">Select</button>

</div>

<div id="bass">
    <h3>BASS TROMBONE</h3>
    <h4>$900</h4>
    <p>
        Lorem ipsum.<br>
        Lorem ipsum.com<br>
        Lorem ipsum dolor.<br>
        Lorem ipsum.
    </p>
    <button class="btn">Select</button>

</div>

<div id="valvet">
    <h3>VALVET TROMBONE</h3>
    <h4>$1200</h4>
    <p>
        Plays similar to a Trumpet.<br>
        Great for Jazz Bands.<br>
        Lorem ipsum.
        <p><button class="btn">Select</button>
        </p>
</div>


</div>

</body>
</head>
</html>

Answer 2

使用 margin：10px; 尝试使用这三个＃tenor，＃bass和#valvet ID。如果您不希望网格列之间存在间隙，则必须在这三个＃tenor，＃bass和#valvet ID中使用 margin：10px 0; 。

#prices {
    display: flex;
    justify-content:center;
    align-items:center;
    margin: auto;
}
#tenor,
#bass,
#valvet {
    border: 1px solid;
    width: 100%;
    max-width: 360px;
    height: 330px;
    text-align: center;
    margin: 10px 0;
}

<html>
<head>
<body>

<div id="prices">
    <div id="tenor">
        <h3>TENOR TROMBONE</h3>
        <h4>$600</h4>
        <p>
            Lorem ipsum.<br>
            Lorem ipsum.<br>
            Lorem ipsum dolor.<br>
            Lorem ipsum.
        </p>
        <button class="btn">Select</button>

    </div>

    <div id="bass">
        <h3>BASS TROMBONE</h3>
        <h4>$900</h4>
        <p>
            Lorem ipsum.<br>
            Lorem ipsum.com<br>
            Lorem ipsum dolor.<br>
            Lorem ipsum.
        </p>
        <button class="btn">Select</button>

    </div>

    <div id="valvet">
        <h3>VALVET TROMBONE</h3>
        <h4>$1200</h4>
        <p>
            Plays similar to a Trumpet.<br>
            Great for Jazz Bands.<br>
            Lorem ipsum.
            <p><button class="btn">Select</button>
            </p>
    </div>


</div>

</body>
</head>
</html>

有没有办法消除CSS3网格中的间隙并将网格居中？

2 个答案: