css布局 一行排几个元素
2017-08-30 15:05
375 查看
要想这样的效果:
用flex实现:
首先要在外层(div)使用display:flex; 在确定,布局方向(水平或是垂直),水平使用flex-direction: row; 要使里面的元素都在中央(middle),这在用align-items: center;
在声明一层(div),如手机号码 与图标,可以这样
用flex实现:
首先要在外层(div)使用display:flex; 在确定,布局方向(水平或是垂直),水平使用flex-direction: row; 要使里面的元素都在中央(middle),这在用align-items: center;
在声明一层(div),如手机号码 与图标,可以这样
<div style="flex: 3 1 auto;padding-left: 60px;"> <span >手机号码</span> <img src="../../static/img/user/user_icon/ok.png" style="margin-left: 40px"> </div>
即整体代码为:
<div style="margin-left: 60px; margin-right: 90px">
<div style="padding-top: 60px;">
<span style="font-size: 16px;font-weight: bold;">安全设置</span>
</div>
<div style="margin: 30px 0"></div>
<div style="display: flex; flex-direction: row;align-items: center;height: 50px;background-color: #eeeeee;">
<div style="flex: 3 1 auto;padding-left: 60px;"> <span >手机号码</span> <img src="../../static/img/user/user_icon/ok.png" style="margin-left: 40px"> </div>
<span style="flex: 5 1 auto;">绑定的手机号码:176xxxxx61</span>
<a href="javascript:void(0)" @click="" style="margin-right: 60px;text-decoration:none;">修改</a>
</div>
</div>
相关文章推荐
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
- 多个元素并排一行,div+css布局乱码,如何进行处理
- css 布局最后一个字无法进入上一行
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?
- css元素定位和布局
- 使用CSS实现鼠标悬停在一行上,显示某些元素
- Ext FormPanel布局 (一行显示两对控件元素)
- CSS三列布局之左右宽度固定,中间元素自适应问题
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- DIV+CSS 一行两列布局
- css -- 布局元素
- CSS布局--子元素margin-top 改变父元素定位的问题
- iOS 自动布局 同一行的几个控件 需要其中某几个不被压缩,其中某几个不被拉伸
- css布局--父级元素高度自适应
- 几个css元素
- css 行内元素基本视觉布局----- 个人理解
- CSS 实践:简单的块级元素布局
- inline-block布局列表项元素不在一行的问题
- 栋栋晓05:详解css布局中的display属性(行内元素和块级元素)
- CSS 内联元素和块级元素内部布局规则