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;
}

请填写表单

• 应用名称：

   

  爱小猫

   

• 个人签名：

   

  推广计划名称" required="" type="text" />

   

• 个人描述：

   

   

如果改变p.form-table的宽度时，右边的p.info元素及子元素的大小也会跟着改变；实现自适应；

效果图：