Question

我需要一些关于这个问题的建议。在下面的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>

Answer 1

你会得到这个：

enter image description here

在这里小提琴：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%; }

响应式内联块查询

1 个答案: