这种响应式设计有可能吗？

的问题是div.description

图像高度必须width:25%;和height:auto;
div.description应作为高度图像和width:75%;

<div id="images"> 
    <a href="/klinika-anesteziologie-a-intenzivnej-mediciny/" class="rotate"> 
     <div class="image"> 
      <img src="http://i.imgur.com/1SIYe1c.png" border="0"> 
     </div> 
     <div class="description"> 
      <div class="normal_description">Klinika anesteziológie a intenzívnej medicíny</div> 
     </div> 
     <div style="clear:both"></div> 
    </a> 
    <a href="/klinika-cievnej-chirurgie/" class="rotate"> 
     <div class="image"> 
      <img src="http://i.imgur.com/1SIYe1c.png" border="0"> 
     </div> 
     <div class="description"> 
      <div class="normal_description">Klinika cievnej chirurgie</div> 
     </div> 
     <div style="clear:both"></div> 
    </a> 
    <a href="/kardiologicke-oddelenie/" class="rotate"> 
     <div class="image"> 
      <img src="http://i.imgur.com/1SIYe1c.png" border="0"> 
     </div> 
     <div class="description"> 
      <div class="normal_description">Klinika kardiológie</div> 
      <div class="hover_description"> 
       Angiologické oddelenie<br> 
       Arytmologické oddelenie<br> 
       Kardiologické oddelenie 
      </div> 
     </div> 
     <div style="clear:both"></div> 
    </a> 
    <a href="/kardiochirurgicke-oddelenie/" class="rotate"> 
     <div class="image"> 
      <img src="http://i.imgur.com/1SIYe1c.png" border="0"> 
     </div> 
     <div class="description"> 
      <div class="normal_description">Klinika srdcovej chirurgie</div> 
     </div> 
     <div style="clear:both"></div> 
    </a> 
    <a href="/osetrovatelstvo/" class="rotate"> 
     <div class="image"> 
      <img src="http://i.imgur.com/1SIYe1c.png" border="0"> 
     </div> 
     <div class="description"> 
      <div class="normal_description">Úsek ošetrovatestva</div> 
     </div> 
     <div style="clear:both"></div> 
    </a> 
    <div style="clear:both"></div> 
</div>

链接 - fiddle

来源

2014-02-24 pooler

它仍然太模糊......你想要什么不同？我不明白。 – Siyah

div.description不是身高的形象高度 – pooler

难道你不只是将背景颜色添加到a.rotate元素呢？图像将覆盖背景颜色，并获得您想要的效果。

Updated fiddle

编辑re。评论：

所以你也需要垂直居中一个块级元素在一个块级父变量高度。这并不容易，可能需要自己的问题（但先查找现有的答案，其中有很多）。

我首先想到的将是如here所述的css表格，但显示表格单元格和图像似乎存在问题，导致添加了一些不需要的填充。我又更新了小提琴证明：

Updated fiddle 2

我会建议使用我在第二小提琴提供的（有缺陷）的解决方案，然后询问有关不需要填充了新的问题。

来源

2014-02-24 14:42:36 rusmus

Exacly我正要回答。 +1 –

使用此解决方案，我将与描述对齐（horizontaly） – pooler

问题我不确定你的意思。应该如何对齐？ – rusmus

@media only screen and (min-width: 400px) { .rotate[margin:5px;}}

这是否帮助？

来源

2014-02-24 14:35:29 user3252833

不，它不.. – pooler

在您的描述上，添加最小高度，并使其与图像一样高。那么它将至少与图像一样高，同时允许它在需要时增长。

来源

2014-02-24 14:36:57 kthornbloom

这种响应式设计有可能吗？

回答

相关问题