具有流体布局内容的方形 DIV答案

【问题标题】：Square DIV with Content in a Fluid Layout具有流体布局内容的方形 DIV
【发布时间】：2018-10-11 10:07:38
【问题描述】：

所以，

我已经为一个网站创建了一个四列流体宽度布局，并且我正在努力在我的一个列中放置一个流体方形 DIV。我发现有一些技术可以实现这一点 - 即，将 padding-bottom 设置为与宽度相同的百分比 - 但当 DIV 包含内容时，这些似乎都不起作用。

当 DIV 包含内容时，有没有办法在流体 DIV 上保持 1:1（平方）的比例？

这是我的 HTML：

<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>

还有我的 CSS：

body {
width: 100%;
height: 100%;
background-color: red;
}

#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}

#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}

#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}

#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}

#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d; 
color: white;    
}

这是JsFiddle。

DIV“标志”是我试图保持为正方形的标志。现在，我使用了 padding-bottom 方法，但是当 DIV 中有内容时，这并不能解决问题。非常感谢任何输入！

马卡

编辑：

到达那里...我正在调整我发现的脚本以找到 DIV 的宽度，然后将该值应用于高度以使其保持为正方形。但是，就目前而言，脚本不会不断调整 DIV 的大小，也不会允许它缩小到某个大小以下。有关如何纠正这些问题的任何想法？

HTML：

<div id="box"></div>

CSS： #box { width: 75%; height: 50px; background-color: black; }

JQUERY：

$("#box").css("height", function() { 
return $(this).width();
});

JsFiddle 是 here。

【问题讨论】：

标签： html css fluid-layout

【解决方案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 个月后仍然与您相关。

-桑迪

【讨论】：

【解决方案2】：

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

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

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

【讨论】：