отзывчивый встроенный блок запрос

Мне нужен совет по этому вопросу, который у меня есть. В нижеприведенном 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

Fiddle здесь: 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

Awesome, Спасибо вам, ребята. –

Если вам ответили на ваш вопрос, пожалуйста, подумайте о том, чтобы принять его как ответ, он может помочь другим людям. – Esteban

отзывчивый встроенный блок запрос

ответ

Смежные вопросы