有没有办法在我的CSS3网格删除空白，并居中网格？

问题描述 投票：0回答：2

我创建了一个家长的DIV内就3周孩子的div。我希望每个3周的div是在同一列，但屏幕与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盒之间的巨大差距。如何删除空白，但要确保它仍然为中心相对于屏幕？

先感谢您。

html css html5 css3 css-grid
2个回答
0
投票

您可以使用CSS属性弯曲来实现这一

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>
0
投票

试试这个您使用保证金：10px的;这三个#tenor，#bass，#valvet IDS。如果你不想让网格列之间的差距，你必须使用保证金：10px的0;在这三个#tenor，#bass，#valvet IDS。

#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.