设置一个div的高度兄弟DIV

的百分比我已经三米连胜的兄弟姐妹的div：设置一个div的高度兄弟DIV

右格：具有由它的文本内容确定的高度核实。

居中div：应该与右div的高度相匹配的div。

Left div：一个div，我想要设置为右div的50％高度。使用带有左Flexbox的

CSS尝试DIV不工作：

.container { 
    display: flex; 
} 
.left { 
    width: 50px; 
    height: 50%; 
    background-color: lightcyan; 
} 
.center { 
    width: 50px; 
    background-color: lightcoral; 
} 
.right { 
    width: 300px; 
    background-color: palegreen; 
}

我发现只有这样，才能让左div来计算右div的高度的百分比是使用position: absolute，如this answer。

绝对定位并不理想，因为它阻止我使用正常的布局流程在一行中设置三个div彼此相邻。

有没有什么办法可以将Left div设置为Right div高度的百分比，而无需使用固定的水平布局将三个div设置为一行？

布局只需要在最近的Chrome中工作，所以浏览器不兼容性不是问题。我愿意使用flexbox或表格布局解决方案。

来源

2014-11-04 Jeremy

除非你把他们包含的元素中，并设置了高度，那么有没有办法做到这一点只用CSS。 – TylerH 2014-11-04 18:25:59

我知道你已经发布了一个答案的链接，包括这个作为解决方法：http://jsfiddle.net/h7gc12wb/5/，但你也写道'“绝对定位不太理想，因为它阻止我使用正常的布局流程来设置三个div彼此相邻“'。当你在'.left'的孩子上使用'position：absolute;'时，你不会有这个问题。 – 2014-11-04 18:41:05

我不知道你的HTML结构有什么限制。但一个简单的方法来做你想做的就是将left div设置为一个等高table-cell div，并在里面设置一个高度为50%的内部div。也不会影响要素流动：

Updated JsFiddle

.container { 
 
    display: table; 
 
} 
 

 
.left { 
 
    display: table-cell; 
 
    position: relative; 
 
    width: 50px; 
 
} 
 

 
.left > div { 
 
    background-color: lightcyan; 
 
    height: 50%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.center { 
 
    display: table-cell; 
 
    width: 50px; 
 
    background-color: lightcoral; 
 
} 
 
.right { 
 
    display: table-cell; 
 
    width: 300px; 
 
    background-color: palegreen; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <div></div> 
 
    </div> 
 
    <div class="center"></div> 
 
    <div class="right"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor vitae ante quis suscipit. 
 
    </div> 
 
</div>

来源

2014-11-04 18:42:25 LcSalazar

设置一个div的高度兄弟DIV

回答

相关问题