css布局技巧

//设为盒子模型  主轴上子元素排列布局space-between

.newAdd_wrap>.add_left, .acif_left, .part_left {

　　display: flex;

　　justify-content: space-between;

}

//设为盒子模型后  也可以给定宽度  

.add_left, .acif_left, .part_left {

　　 87% !important;

}

//里面的子元素可为自己设置一定长度

.newAdd_wrap>.add_left input, .part_left input, .acif_left input, .part_left>.small_title_keyword input {

　　　　display: inline-block;

 　　　　 230px; 

　　　　height: 26px;

　　　　padding-left: 4px;

}

<div class="timeWrap">
　　<span class="textStyle lf">创建时间：</span>
　　<div class="playBlock mleft">
　　　　<input type="text" id="createTime">
　　</div>

</div>

//自适应 父级

.duiqi>.timeWrap {

1. float: left;
2.  50%;

}

.textStyle {

1.  85px;
2. text-align: right;

}

 

 

.textStyle {

1.  85px;
2. text-align: right;

}

.lf {

1. float: left;

}

.duiqi .playBlock {

1. display: block;

}

.mleft {

1. margin-left: 85px;

}