1

我需要一些关于我遇到的这个问题的建议。在jsfiddle下面，我正在尝试创建一个响应grid式布局。我所拥有的问题是，我希望文本位于每个人的中间grid。我尝试过使用 margin-top 来碰撞它，但不是在调整大小时图像相互堆叠，而是图像相互重叠。所需的最终结果是使文本在图像上居中对齐，并且grid在根据各种屏幕分辨率调整大小时在所有边上都没有间隙。

链接：http: //jsfiddle.net/kelvinchow/VaDS9/

<style type="text/css">
#wrapper {
    display: block;
    width: 100%;
    height: auto;
    background: green;
}
.box {
    display: inline-block;
    float: left;
    width: 50%;
    height: auto;
    vertical-align: baseline;
    background: red;
}
.box-img img {
    width: 100% !important;
    height: auto;
}
.box-title {
    display: block;
    background: grey;
    height: 25px;
    font-size: 20px;
    font-family: helvetica, san serif;
    color: blue;
    text-align: center;
    margin-top: -100px;
}
</style>

<div id="wrapper">
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
</div>
4

1 回答 1

1

你会得到这个：

在此处输入图像描述

在这里摆弄：http: //jsbin.com/osazav/1。

使用此标记：

<body>
    <div id="tl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="tr" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="bl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="br" class="box">
        <p class="box-title">howdy</p>
    </div>
</body>

这个CSS：

div.box {
    background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
    position: absolute;
    height: 50%;
    width: 50%;
    background-size: cover;
    background-position: center;
}
div.box p.box-title {
    color: red;
    background-color: black;
    padding: 5px;
    position: absolute;
    margin: -10px -20px;
    top: 50%;
    left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }
于 2013-06-04T08:35:52.680 回答