Div不用float布局

CSS代码

.wrapper1_4 {
    width: 100%; /* 也可以固定宽度 */
    height: 26px;
}
.wrapper1_4 > .left {
    display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */
    width: calc(8%); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
    width: -webkit-calc(8%);
    width: -moz-calc(8%);
    height: 100%;
    text-align: center;
}
.wrapper1_4 > .right {
    display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */
    width: calc(28%); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
    width: -webkit-calc(28%);
    width: -moz-calc(28%);
    height: 100%;
}

Html

<div class="wrapper1_4">
     <div class="left">
         lable1:
     </div>
     <div class="right">
         <input type="text"  />
     </div>
     <div class="left">
         lable2:
     </div>
     <div class="right">
         <input type="text"  />
     </div>
</div>

猜你喜欢

转载自www.cnblogs.com/aeolian/p/9576903.html
今日推荐