0

我有以下页面作为响应式布局的示例：flexible Grid

现在我希望我自己的项目与此页面上的图像一样。随着屏幕尺寸的减小，元素也应该调整大小。

对于这些元素的宽度，一切正常。但他们的身高不会改变。我想知道示例页面的作者是如何做到这一点的，因为他甚至没有在他的图像上使用单个高度属性。

这是我的代码：

  • HTML

    <div id="wrapper">  
<ol>
    <li id="el-1" class="figure"><div class="element"><p class="heading">Lorem1</p></div></li>
    <li id="el-2" class="figure"><div class="element"><p class="heading">Lorem2</p></div></li>
    <li id="el-3" class="figure"><div class="element"><p class="heading">Lorem3</p></div></li>
    <li id="el-4" class="figure"><div class="element"><p class="heading">Lorem4</p></div></li>
    <li id="el-5" class="figure"><div class="element"><p class="heading">Lorem5</p></div></li>
    <li id="el-logo" class="figure"><div class="background"><p>LoremIpsum<br>Lorem</p></div></li>
    <li id="el-6" class="figure"><div class="element"><p class="heading">Lorem6</p></div></li>
    <li id="el-7" class="figure"><div class="element"><p class="heading">Lorem7</p></div></li>
    <li id="el-8" class="figure"><div class="element"><p class="heading">Lorem8</p></div></li>
    <li id="el-9" class="figure"><div class="element"><p class="heading">Lorem9</p></div></li>
    <li id="el-10" class="figure"><div class="element"><p class="heading">Lorem10</p></div></li>
</ol>

  • CSS

http://nopaste.info/d8a051e767.html

4

2 回答 2

1

示例页面正在使用图像，而您却没有。那你就不能拿它来举例子了。在您的情况下，如果您没有为您的 div 设置任何高度，它们将增长以使其内容适合。因此，要使它们一起调整大小，您可以使用表格或使用 javascript（例如检查匹配列）

于 2012-11-22T14:05:36.080 回答
0

它的

img {
    max-width: 100%;
}

在 ex-site-flexible.html 第 63 行。

它使图像与包含 A 的宽度一样宽，并且图像会自动正确缩放..

但是其他元素没有，因此您只能对图像执行此操作。

于 2012-11-22T14:13:47.193 回答