Question

SO，

我为一个站点创建了一个四列流体宽度布局，我正在努力在我的一个列中放置一个流畅的方形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。

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个月之后，这一切仍然与你相关。

-Sandy

Answer 2

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

让您的四列中的每一列的宽度均为25em而不是25％

将徽标宽度和高度设置为每个25em

带有流体布局内容的方形DIV

2 个答案: