html - 具有流体布局内容的方形 DIV

Answer 1

这是我实际上已经搞砸了一段时间的事情，并且提出了一个准（但不完全）hacky，仅CSS的解决方案，似乎在过去十年中适用于大多数浏览器。诀窍是使用图像，并以一种棘手的方式定位。考虑以下（简化）您的代码。

标记：

<div class="sqr_box">
    your content goes here!
</div>

CSS：

.sqr_box
{
    width: 50%; /* or 100px, or 20em, or whatever you want */
    border: solid 2px pink;
    background-color: grey;
    color: white;
}

现在，我们不能用百分比来设置高度，所以我们不会；相反，首先我们将进入 Photoshop，并制作一个 2x2 像素、透明或背景色的图像。接下来，我们将以下内容添加到您的标记中：

<div class="sqr_box">
    <img src="images/sizers/2x2.png" class="sizer">
    <div class="content">your content goes here!</div>
</div>

这给你的CSS：

.sqr_box
{
    width: 50%; /* or 100px, or 20em, or whatever you want */
    position: relative; /* static positioning is less than ideal for this scenario */
}

.sqr_box > img.sizer
{
    display: block; /* images default to an inline-block like thing */
    width: 100%;
    height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
    visibility: hidden;
}

.sqr_box > .content
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;  /* Our parent element now has a dynamically assigned height, this will work */

    border: solid 2px pink;
    background-color: grey;
    color: white;
}

最重要的是，这适用于您想要的任何尺寸比例的盒子！只需改变图像的比例！

希望这一切在 3 个月后仍然与您相关。

-沙

Answer 2

将所有四列放在一个 div 中。将该 div 设置为 100% 宽度并将字体大小设置为 100em

让你的四列中的每一列都有 25em 而不是 25% 的宽度

将您的徽标宽度和高度分别设置为 25em