響應式內嵌塊查詢

我需要一些關於此問題的建議。在下面的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

響應式內嵌塊查詢

回答

相關問題