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

2019-11-10 19:01:33

字体：大中小

来源：转载

供稿：网友

http://blog.csdn.net/itpinpai/article/details/50858538

CSS样式

[css] view plain copy PRint?

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代码

[html] view%20plain copy print?

<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元素及子元素的大小也会跟着改变；实现自适应；

效果图：

上一篇：IO流_字节流复制图片案例

下一篇：r 常规