Question

我一直试图制作一个专辑图片组，但是右边有一个很大的差距而且不使用Padding就不合适了，但是当我使用Padding时它只适合我的PC分辨率和其他分辨率之间的差距更大，如果分辨率比其他影像大，它不会调整主要尺寸的大小，我尝试了很多方法，但我只是不明白什么我应该改变高度和宽度。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>
    <div class="cards-deck">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-block">
                        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-block">
                    <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    </div>

    <style>
        .card-block {
            display: flex;
            align-items: center;
            padding: 16px;
        }

        .card {
            background-color: transparent;
            border-width: 0px;
        }

        .row {
            float: left;
        }
    </style>
</body>

</html>

其他设备LOOK https://i.imgur.com/U2LtbFN.jpg

Answer 1

查看代码：http://codepen.io/cbgraphics/pen/GrMYKQ

查看您的代码，看来您正在使用Bootstrap。有一些你没有利用的内置标签。

我使用大量的小调整重建了类似的布局。

首先 - 您需要将内容包装在容器类中： <div class="container">

第二 - 如果你把每张卡放在一个列div中会更好。这些会自动填充您的列（假设您的图片大小都相同。<div class="col-md-3">

第三 - 我更改了填充以保持网格间距一致。

您无需为每个图像创建新行。您使用Bootstrap的当前方式是尝试覆盖默认函数和CSS，使其变得非常棒。

有关Bootstrap网格系统的更多信息：http://getbootstrap.com/css/#grid

居中图像组

1 个答案: