CSS左侧固定宽 右侧自适应(兼容所有浏览器)

CSS样式

[css]  view plain  copy

 print ?

1. body,ul,li {  
2.   margin:0;  
3.   padding:0;  
4. }  
5. ul,li {  
6.   list-style:none;  
7. }  
8. .form-table {  
9.   width: 600px;  
10.   height: 330px;  
11.   margin:10px auto;  
12.   overflow: hidden;  
13.   padding: 0;  
14. }  
15. .form-table .list {  
16.   width: 100%;  
17.   height: auto;  
18.   overflow: hidden;  
19. }  
20. .form-table .list .item {  
21.   width: 100%;  
22.   height: auto;  
23.   margin-top: 10px;  
24.   font-size: 12px;  
25.   line-height: 40px;  
26.   overflow: hidden;  
27. }  
28. .form-table .list .item .name {  
29.   float: left;  
30.   width: 67px;  
31. }  
32. .form-table .list .item .info {  
33.   width: 100%;  
34.   height: auto;  
35.   margin-left: 67px;  
36. }  
37. .form-table .list .item .textarea {  
38.   position: relative;  
39.   width: auto;  
40. }  
41. .form-table .list .item .input {  
42.   width: 360px;  
43.   height: 40px;  
44.   line-height: 40px;  
45.   text-indent: 10px;  
46.   border: 1px solid #e5e5e5;  
47.   border-radius: 3px;  
48. }  
49. .form-table .list .item textarea {  
50.   width: 100%;  
51.   height: 100px;  
52.   border: 1px solid #e5e5e5;  
53.   border-radius: 3px;  
54.   box-sizing: border-box;  
55. }  

HTML代码

[html]  view plain  copy

 print ?

1. <div class="form-table">  
2.   <div class="page-title">  
3.     <h2 class="tit">请填写表单</h2>  
4.   </div>  
5.   <ul class="list">  
6.     <li class="item">  
7.       <div class="name">应用名称：</div>  
8.       <div class="info">爱小猫</div>  
9.     </li>  
10.     <li class="item">  
11.       <div class="name">个人签名：</div>  
12.       <div class="info">  
13.         <input type="text" name="projectName" placeholder="推广计划名称" required />  
14.       </div>  
15.     </li>     
16.     <li class="item">  
17.       <div class="name">个人描述：</div>  
18.       <div class="info textarea">  
19.         <textarea name="productDes" id="productDes" placeholder="个人描述" required></textarea>  
20.       </div>  
21.     </li>  
22.   </ul>  
23. </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元素及子元素的大小也会跟着改变；实现自适应；

效果图：