Question

我正在尝试制作这样的东西。任何帮助将不胜感激。

（由于2个遗失点而无法粘贴图片;））http://i.stack.imgur.com/p7xhr.jpg

对不起，我给人一种印象，就像我根本不知道自己在做什么，我希望别人为我做我的工作。我确实尝试了各种解决方案，但似乎都没有。

在jfsfiddle它似乎工作，但当我检查实际网站时，右上角的图像被移动到另一行

HTML

<div>
  <div class="image">
  <img src="image.jpg" width="98" height="203"/>
  </div>
  <div class="image">
  <img src="image.jpg" width="85" height="203"/>
  </div>
  <div class="clear"></div>
</div>
<div>
  <div class="image">
    <img src="image.jpg" width="130" height="210"/>
  </div>
  <div class="image">
    <img src="image.jpg" width="69" height="197"/>
  </div>
  <div class="clear"></div>
</div>

CSS

.image {
    float: left;
    width: 100px;
    margin-top:50px;
    margin-left:280px;
}

Answer 1

这只是为了给你一个圆润的想法。

您需要这样的HTML：

<div id="contentHolder">
    <div class="row">
        <div>
            <div class="image"></div>
            <div class="textHolder">Some text here</div>
        </div>
        <div>
            <div class="image"></div>
            <div class="textHolder">Some text here</div>
        </div>
    </div>
    <div class="row">
        <div>
            <div class="image"></div>
            <div class="textHolder">Some text here</div>
        </div>
        <div>
            <div class="image"></div>
            <div class="textHolder">Some text here</div>
        </div>
    </div>
</div>

和CSS这样：

* {
    margin:0;
    padding:0;
}
#contentHolder {
    background-color:Gray;
    height:100%;
    padding:40px 10px;
}
.row {
    height:250px;
    width:100%;
    margin-bottom:30px;
}
.row > div {
    display:inline-block;
    width:48%;

    height:inherit;
    vertical-align:top;
}
.image {
    background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
    height:160px;
    width:70%;
    margin:20px auto;
    border-radius:10px;
}
.textHolder {
    color:White;
    width:50%;
    height:20px;
    margin:0 auto;
}

这对你有用。这可能仍然需要一些工作，因为我没有尝试使它完美。我会留给你的！：）

您可以在此处看到：http://jsfiddle.net/a7zLW/

希望这有帮助!!!

如何在每个图像下方居中显示2行2个图像

1 个答案: