Question

我在div元素“容器”中有width:70%的图片库。这些图像需要证明自动边距是合理的。

这是我的HTML代码：（我有4张图片）

<div class="container">         
    <ul class="grid gallery">
        <li class="animation-element">
            <figure>
                <img src="http://s33.postimg.org/638l2frnz/google_logo.png" alt="GINIS">
                <figcaption>
                    <h3>Name</h3>
                    <span>Description</span>
                </figcaption>
            </figure>
    </li>           
</div>

还有CSS代码：

.grid {
    width:100%;
    margin: 0 auto;
    list-style: none;
    text-align:left;}
.grid li {
  border:1px solid blue;
    box-shadow:0px 0px 1px #black;
    display: inline-block;
    width: 250px;
    margin-bottom:20px;
    font-family: "Ubuntu", sans-serif;
    text-align: left;
    position: relative;}

在这个CSS代码中，这个（li）是应该被证明合理的主要元素。

以下是我的代码示例： http://codepen.io/anon/pen/QEybgL

Answer 1

将此添加到您的 css 代码：

.grid {
    padding: 0;
    display: flex;
}

.grid > li {
    margin: auto auto 20px auto;
    justify-content: space-around;
}

<强> 解释：

弹性值：它为所有直接子级启用弹性上下文。

justify-content ：这定义了沿主轴的对齐方式。当线路上的所有弹性项目都不灵活，或者灵活但已达到其最大尺寸时，它有助于分配剩余的额外空闲空间。当物品溢出线时，它还会对物品的对齐施加一些控制。

空间值：项目均匀分布在线条周围，空间相等（如果项目大小相同）。

边距：在Flex容器中设置为auto的边距会占用额外空间。

我建议你阅读flexbox。

Answer 2

这是一个简单的解决方法。如上所述，如果您愿意，也可以使用flex，但如果您这样做，请确保添加后备。从长远来看，flex可能是最好的画廊。

如果没有，只需更改您的.grid课程，如下所示：

.grid {
    padding:0;
    list-style: none;
    text-align:center;
}

如何使用margin：auto来证明图库中大小相等的图像？

2 个答案: