CSS左側固定寬 右側自適應(兼容所有瀏覽器)


CSS樣式


body,ul,li {  margin:0;
padding:0;
}
ul,li {
list-style:none;
}
.form-table {
width: 600px;
height: 330px;
margin:10px auto;
overflow: hidden;
padding: 0;
}
.form-table .list {
width: 100%;
height: auto;
overflow: hidden;
}
.form-table .list .item {
width: 100%;
height: auto;
margin-top: 10px;
font-size: 12px;
line-height: 40px;
overflow: hidden;
}
.form-table .list .item .name {
float: left;
width: 67px;
}
.form-table .list .item .info {
width: 100%;
height: auto;
margin-left: 67px;
}
.form-table .list .item .textarea {
position: relative;
width: auto;
}
.form-table .list .item .input {
width: 360px;
height: 40px;
line-height: 40px;
text-indent: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
}
.form-table .list .item textarea {
width: 100%;
height: 100px;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-sizing: border-box;
}

HTML代碼

<div class="form-table">  <div class="page-title">    <h2 class="tit">請填寫表單</h2>  </div>  <ul class="list">    <li class="item">      <div class="name">應用名稱:</div>      <div class="info">愛小貓</div>    </li>    <li class="item">      <div class="name">個人簽名:</div>      <div class="info">        <input type="text" name="projectName" placeholder="推廣計划名稱" required />      </div>    </li>       <li class="item">      <div class="name">個人描述:</div>      <div class="info textarea">        <textarea name="productDes" id="productDes" placeholder="個人描述" required></textarea>      </div>    </li>  </ul></div>


左邊的div.name要浮動,右邊的div.info不設置浮動(同時不要定義width為像素或百分比,可以不定義,也可以是auto,),

設置margin-left的值和左邊div.name的寬度值一致;

如果把textarea改成DIV元素的話,如果你不設置margin-left的話,也可以自適應,如果給div.info添加一個背景色,它(div.info)會占和父元素一樣的寬度,這樣會帶來一個問題,如果給div.info添加一個邊框的話,那么div.info的邊框會占滿占個父元素的寬度。

box-sizing:border-box;意思讓元素的大小包含邊框,支持ie8+;

如果改變div.form-table的寬度時,右邊的div.info元素及子元素的大小也會跟着改變;實現自適應;


效果圖:





注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com