根据父级

时间:2015-06-22 04:35:05

标签: html css html5 css3

全球问题:

我想根据父母的身高设置元素的宽度,我知道你可以使用padding-top根据父母的宽度设置高度,也许有人知道我的情况下的技巧。

一个可能的解决方法(技巧)到全局问题会将height: 100%设置为元素,然后设置rotate(90deg)来模拟它的宽度等于父元素的宽度高度,但不适合我的情况。

具体问题(也许可以采取一些解决方法):

简化问题:

我想要一个动态方形元素,其宽度和高度= x,其中x =父级的高度。

enter image description here

完整问题:

我想要这样的东西

enter image description here

其中x = d / sqrt(2)(毕达哥拉斯定理)

所以你可以看到“d”是父母的身高,我试试

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here is my problem  because width depends on the parent's width and I don't know how to make it depends on the parent's height
}
<div class="blue"></div>

请注意,我设置了固定的width,因为我不知道如何制作它取决于height的{​​{1}}

Here a jsfiddle example to do some workaround.

如果有人能帮助我,我将不胜感激。

仅限CSS

4 个答案:

答案 0 :(得分:2)

解决您的具体但尚未完整的问题:

  

我想要一个动态方形元素,其宽度和高度= x,其中x =父级的高度。

动态方块可以是图像,父级是div。

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

现在,对于此设置,您可以为父级提供所需的高度,并告诉元素(图像)完成所有操作。像这样:

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

这样,宽度不是您关心的问题。

修改

将CSS修改为:

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

应解决“完整问题”。

请注意,高度和最高值是粗略计算,应重新执行。

小提琴:https://jsfiddle.net/0pok1bf0/

答案 1 :(得分:1)

只是为了踢和笑,这是一个有趣的尝试,利用垂直百分比(填充),如下所述: http://www.impressivewebs.com/vertical-percentages-css/

&#13;
&#13;
.d1 {
	margin-left: 50px;
	width: 50%;
	background-color: #CCCCFF;
	border: solid black 1px;
}

.d2 {
	width: 25%;
	background-color: #FF6666;
	border: solid black 1px;
	padding-top: 25%;
	margin: 5%;
	margin-left: -13%;
	transform: rotateZ(45deg);
}
&#13;
<div class="d1">
	<div class="d2"></div>
</div>
&#13;
&#13;
&#13;

查看整页模式并调整大小......一切都很好地扩展,差不多:P

答案 2 :(得分:0)

您可以尝试使用伪元素。但是,如果不是高度/宽度,您仍需要设置边框宽度。

演示:http://jsfiddle.net/lotusgodkk/GCu2D/752/

CSS:

.box {
    position:relative;
    background-color:#7092BE;
    width:500px;/*sample*/
    height:150px;/*sample*/
    margin:0 auto;
}
.box:before {
    position: absolute;
    content:"";
    right: 100%;
    border-style: solid;
    border-color: transparent #880015 transparent transparent;
    top: 0;
    bottom: 0;
    border-width:75px;
}
.box:after {
    position: absolute;
    content:"";
    left: 0;
    border-style: solid;
    border-color: transparent transparent transparent #880015;
    top: 0;
    bottom: 0;
    border-width:75px;
}

HTML:

<div class="box"></div>

答案 3 :(得分:0)

我为您的问题提出了两个实际的实施方案。 一个选项需要一个额外的包装器。另一个需要两个。

这两个选项都允许您配置高度和宽度,尽管方式不同。

对于您的特定用例,选项1是最佳方法。

选项1

此选项只需要一个额外的包装div。您可以定义矩形的height的值和width - height的值(定义为填充)。广场的宽度和高度会自动调整。

小提琴:

<强> http://jsfiddle.net/w9wgb72e/9/

代码:

&#13;
&#13;
.bluecontainer {
    width: 100px; /* set height of rectangle */
    margin: 8px auto;
    padding-right: 100px; /* this value equals height - width of the rectangle */
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100%;
    margin-left: -49.6%;
    position: relative;
    padding-bottom: 100%;
}

.ratiocontainer:before {
    content: '';
    background: firebrick;
    padding: 35.4%;
    margin: 14.5%;
    float: left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
&#13;
<div class="bluecontainer">
    <div class="ratiocontainer">
    </div>
</div>
&#13;
&#13;
&#13;

选项2

此选项需要两个额外的包装div。您可以定义方块的heightwidth以及矩形的width的值。矩形的高度会自动调整,以允许矩形环绕方块。

小提琴:

<强> http://jsfiddle.net/w9wgb72e/10/

代码:

&#13;
&#13;
.bluecontainer {
    width: 200px; /* set width of rectangle */
    margin: 8px auto;
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100px; /* set width & height of red square */
}

.stretchy-square {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    margin-left: -50%;
}

.stretchy-square:before {
    content: '';
    background: firebrick;
    margin: 15%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
&#13;
<div class="bluecontainer">
    <div class="ratiocontainer">
        <div class="stretchy-square"></div>
    </div>
</div>
&#13;
&#13;
&#13;