Question

我试图向w3学习，我发现了图像网格画廊。我试图用四列制作一个，但最后一列包装在前三列的下面。

<div class="row">
            <div class="column">
                <img src="Pictars/bubbles.jpg">
                <img src="Pictars/Bicky.jpg">
            </div>
            <div class="column">
                <img src="Pictars/surfer2.jpg">
                <img src="Pictars/Pier.jpg">
            </div>
            <div class="column">
                <img src="Pictars/oranges.jpg">
            </div>
            <div class="column">
                <img src="Pictars/nightStation.jpg">
            </div>
        </div>

如果我在CSS行类中删除flex：wrap，它将起作用！为什么将flex设置为自动换行时，它不能正确显示？

.row{
    display: flex;
    /*flex-wrap: wrap;*/
    padding: 0 4px;
    justify-content: center;
}

.column{
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

Answer 1

删除padding或添加box-sizing:border-box

.row{
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: center;
}

.column{
    flex: 25%;
    max-width: 25%;
    box-sizing: border-box; /* New added style */
    padding: 0 4px;
    box-shadow: 0 0 10px red inset;
}

.column img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

<div class="row">
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
</div>

为什么我的图像网格不显示四列？

1 个答案: