页面布局时,出现一行两个不同宽度的div在一行上。如下图:
通俗的做法的是什么呢?
方法千千万,我独爱float。
好吧,又爱又恨的float我用了。横向的效果出来了,完美吗?
html: <div id="videoMsg">
<div id="videoTitle">战神</div>
<div id="minicontent">简介<img src="./images/detail/news_arrows.png" alt=""></div>
<div id="msg">简介简介。。。简介简介</div>
</div>
css:
#videoMsg{
margin-top: 0.556rem;
width: 100%;
line-height: 0.389rem;
}
#videoTitle{
display: inline-block;
font-size: 0.389rem;
font-family: bold;
color: #333333;
float: left;
margin-left: 0.417rem;
height: 0.389rem;
}
#minicontent{
display: inline-block;
font-size: 0.361rem;
height: 0.361rem;
color:#999999;
float:right;
margin-right: 0.417rem;
line-height: 0.389rem;
}
#minicontent>img{
display: inline-block;
font-size: 0;
width: 0.333rem;
height: 0.333rem;
vertical-align: middle;
}
#msg{
width: calc(100% - 0.834rem);
margin-left: 0.417rem;
font-size: 0.361rem;
margin-top: 0.167rem;
height: 0.389rem;
color: #666666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
不知各位发现问题没?
对,#msg中的margin-top 不起效。
深入分析:float的使用使得标签已经脱离文档流。所以会影响到隶属于使用float的标签的后面的布局。
最常用的有效方法当然是clear 了,对吧?
经过改造,完美实现:
原html修改为:
<div id="videoMsg">
<div id="videoTitle">战神</div>
<div id="minicontent">简介<img src="./images/detail/news_arrows.png" alt=""></div>
<div class = "mclear"></div>
<div id="msg">简介简介。。。简介简介</div>
</div>
原CSS添加:
.mclear{
clear:both;
}