html - 一个垂直 div 紧挨着 3 个堆叠的水平 div

Question

这就是我想要达到的效果

<div id="wrap">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

#one{
    width:80%;
    height: 30px;
    background-color:red;
    float: right;

}
#two{
    width:80%;
    height: 30px;
    background-color:black;
    float: right;
}
#three{

    float: left;
    width: 20%;
    height: 100%;
    background-color: blue;

}
#wrap{
    width: 900px;
    height: 60px;

}

http://jsfiddle.net/m5u4u89f/

但是有没有办法在没有为所有包装器设置高度的包装器 div 的情况下做到这一点？因为第三个 div 的高度应该与所有其他 div 的总和相同。

Answer 1

除了像@Khanh_TO 那样使用表格，您可以使用 flex。

.thing{
	flex:1;
	background-color:red;
}
.thing:hover{
	background-color:darkred;
}
#three{
	float: left;
	background-color: blue;
}
#wrap{
	display:flex;
	flex:1;
	height:100px;
}
#wrapper{
	display:flex;
	flex-direction:column;
	flex:1;
}

<div id="wrap">
	<div id="three"><p style="transform: rotate(270deg);">text</p></div>
	<div id="wrapper">
		<div class="thing"></div>
		<div class="thing"></div>
		<div class="thing"></div>
		<div class="thing"></div>
		<div class="thing"></div>
	</div>
</div>