我正在尝试使用纯css根据其高度设置.full_height_div
元素的宽度。它必须是宽度相对于高度,而不是高度 - 相对于宽度。原因是父容器(.set_rectangle_height
)已经是一个div,其高度相对于页面宽度。显然,随着页面调整大小,页面上的div
会调整大小,因此我无法在px
中为.full_height_div
子项设置固定宽度。
所以.rectangle
和.set_rectangle_height
组成父容器,其宽度为页面的百分比,相对于此宽度的高度。有关此方法的说明,请参阅here。
但问题是,我想在父height: 100%
内放置一个div,宽度相对于此高度。我的目标是,我将能够改变浏览器窗口大小,一切都将保持其宽高比。
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
所以,这就是上面不正确的标记:
这就是我想要它的样子:
我知道我可以在javascript中找到蓝色方块百分比高度,然后将宽度设置为等于此高度,但如果有一个纯css修复我想要做的事情会非常方便。我会经常使用这个结构,我真的不想编写代码来调整页面上所有div的大小。
答案 0 :(得分:0)
你必须使用javascript。如果我了解你,你需要一个完美的蓝色方块。使用
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
这是一个jsfiddle:http://jsfiddle.net/a8kxu/
修改:而不是padding-bottom: 30%
执行height: 70%
。这是另一个小提琴:http://jsfiddle.net/a8kxu/1/
编辑#2:抱歉,你不能用css来做这件事。它不够强大
答案 1 :(得分:-1)
如果我理解正确
你可以做到
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}