响应式内嵌块查询

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

来源

2013-06-04 Kelvin Chow

这样的事情？ http://jsfiddle.net/peteng/VaDS9/1/ – Pete

你会得到这样的：

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%; }

来源

2013-06-04 08:35:52 Esteban

真棒，谢谢你们。 –

如果这回答了你的问题，请考虑接受它作为答案，它可能会帮助其他人。 – Esteban

响应式内嵌块查询

回答

相关问题