关于处理两个以及多个float:right 右浮动的问题
示例:完成的类型为微信小图标和分享都是右浮动首先我们要做的是将两个右浮动的图标变成一个整体,然后直接设置向右浮动,即出现了两个自动成为一行,主要原因是、两个是一个容器而且他们的父容器宽度被前面的图片和数字撑起来了,所以两者自动成为一行代码如下.eye {width: 0.16rem;height: 0.14rem;...
·
示例:
完成的类型为微信小图标和分享都是右浮动
首先我们要做的是将两个右浮动的图标变成一个整体,然后直接设置向右浮动,即出现了两个自动成为一行,主要原因是、
两个是一个容器而且他们的父容器宽度被前面的图片和数字撑起来了,所以两者自动成为一行
代码如下
.eye {
width: 0.16rem;
height: 0.14rem;
vertical-align: middle;
}
.main-num {
font-size: 0.12rem;
color: rgba(106, 108, 110, 1);
vertical-align: middle;
}
.wechat {
width: 0.12rem;
height: 0.12rem;
vertical-align: middle;
}
.main-share {
color: rgba(89, 114, 144, 1);
font-size: 0.12rem;
vertical-align: middle;
}
.main-right {
float: right;
}
html代码如下
<div class="content-num">
<img src="/mobile/libs/imgs/icon_views.png" alt="眼睛" class="eye">
<span class="main-num">352</span>
<div class="main-right">
<img src="/mobile/libs/imgs/wechat.png" alt="微信logo" class="wechat">
<span class="main-share">分享</span>
</div>
</div>
更多推荐
已为社区贡献1条内容
所有评论(0)