Question

我想让图像在页面上的网格中布局，但我的动画似乎受到了我尝试过的东西的影响。例如，横幅可以偏离中心或比图像更大......

这是我到目前为止的一个小提琴：

所以，我终于让图像居中，但是在一个丑陋的专栏中正好排成一行。

我希望顶部至少有两个图像，底部有两个图像，每个图像之间有一个空格。有什么想法吗？

这是html：

<div id="content">
    <div id="main">
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 1</h2>
                        <br>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <br>
                        <a href="#" class="info">Buy now</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 1</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 1</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">more info</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 11</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Have a look</a>
                    </div>
                </div>
                </div>       
    </div>
    </div>
    </div>

和一些CSS：

#content {
    clear:both;
    margin: 0 auto;
    width: 1000px;
    padding: 35px 0 35px 0;

}

#main {
    clear:both;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
}

/*----------- grid ----------*/

.view {
   width: 399px;
   height: 266px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   text-align: center;
}
.view .mask,.view .content {
   width: 399px;
   height: 266px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

/*----------- photos ----------*/
.view img {
   display: block;
   position: relative;
   width: 399px;
   height:auto;
   margin:0 auto;
}

Answer 1

（编辑）

这里我进行了快速/简单的更改

我已将课程改为.view：

.view {
    width: 399px;
    height: 266px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 5px;
    display: inline-block;
    margin-right: 5px;
}

你试图得到这个吗？ http://jsfiddle.net/fnGwP/6/

Answer 2

如果明白您的问题是正确的：将text-align: center添加到。content

#content {
    ...
    text-align: center;
}

将view-first和clear:right上的浮点数设置为每一秒：

div.view-first {
    float: left;
    margin: 4px;
}
div.view-first:nth-child(2n+0) {
    clear: right;
}

分叉小提琴 - ＆gt; http://jsfiddle.net/59Hjc/ （已更新，完全忘记了保证金）

Answer 3

好的，为了让事情看起来像我想要的，我将CSS更改为：

#content {
    clear:both;
    margin: 0 auto;
    width: 1000px;
    padding: 35px 0 35px 0;
    text-align: center;

}

#main {
    clear:both;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
}

/*----------- grid ----------*/

.view {
    clear:both;
    width: 324px;
    height: 216px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 5px;
    display: inline-block;
    margin-right: 5px;
}
.view .mask,.view .content {
   width: 324px;
   height: 216px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

感谢MCSI和davidkonrad

试图让图像在页面上的网格中布局而不影响动画

3 个答案: