我将在包装器中包含三个子div,其中两个将需要向右浮动,而一个将始终向左浮动(其中一个具有.main
类)。您可以在小提琴中查看我的HTML结构
HTML:
<div id="wrap">
<div class="child">
This is initiator
</div>
<div class="child">
This is second joinee
</div>
<div class="main child">
This is third joinee
</div>
</div>
CSS:
#wrap{
width:600px;
height:400px;
}
.child:nth-child(even){
background:red;
}
.child:nth-child(odd){
background:green;
}
.child{
height: 200px;
width: 200px;
display: block;
float: right;
clear:right;
text-align: center;
vertical-align: middle;
}
.main{
height: 400px!important;
width: 400px!important;
float:left!important;
clear:none!important;
background:yellow !important;
}
但是左浮动的Div总是会下降。有人可以帮助我理解这一行为吗?
注意:我不想更改我的HTML结构。
将以下内容添加到main
css文件中的类中:
.main{
position:absolute;
left:0;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句