一个垂直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并且所有这些都设置了高度，有没有办法做到这一点？因为thrid div应该与所有其他div组合具有相同的高度。

Answer 1

使用像@Khanh_TO这样的表的替代方法，你可以使用flex。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;