HTML布局之左右结构，左边固定右边跟据父元素自适应

为什么80%的码农都做不了架构师？>>>   

在进行html结构布局之时，常用到的一种布局结构就是左右结构，比如注册表单之类的(左边标题，右边是表单控件)，还比如常用的1:2:1的结构布局。这些情况下，我们常希望是左(或右)固定，而右(或左)能根据父元素的宽度自适应。

如下图：

像这种结构的，如果是固定布局那直接两边都固定宽度然后float一下也就是很简单的，不过我们现在是要根据父元素的宽度自适应。好了，切入正题，上代码：

方法一：(最原始，最简单的办法，table)：点击查看demo

下面介绍一下非table的方法：

HTML结构如下：

<ul>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">邮件地址</label><i>：</i>
        </div>
        <div class="item-con">
            <input class="input" placeholder="建议用手机号码注册" type="text" />
            <p class="tips-text">6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
        </div>
    </li>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">密码</label><i>：</i>
        </div>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">6~16个字符，区分大小写</p>
        </div>
    </li>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">确认密码</label><i>：</i>
        </div>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">请再次填写密码</p>
        </div>
    </li>
</ul>

注：这里标题的星号、文字和冒号，可以写在一个标签内，因为我们做的项目是多种语言的，所以标点与文字是分开的，这样方便多语言处理。

方法二：左侧float，右侧margin-left，(在IE6会有3像素BUG)：点击查看demo

CSS如下：

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.item {
    overflow: hidden;
    zoom: 1;
    font-size: 12px;
    margin-bottom: 20px;
}
.item .item-title {
    float: left;
    width: 85px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
}
.item .item-con {
    margin-left: 85px;
}
em,i {
    font-style: normal;
}
p {
    margin: 0.3em 0;
}
.star {
    color: #F00;
    margin-right: 5px;
}
.tips-text {
    color: #ccc;
}
.input {
    border: 1px solid #ccc;
    padding: 2px 5px;
    margin: 0;
}

方法三：跟上面的二差不多99%都相似，唯一的差别就是item-con不一样，但是用这种方法在IE6不会有3像素BUG：点击查看demo

不过，用这种方法，如果你的select不是用的原生的<select>，而是用div来模拟的，并且刚好下拉列表又是追加到.item-con里的话，那恭喜你，列表溢出会被隐藏。其实可以把下拉列表追加到body里，这样就不会有问题了。不过像我们现在的项目，框架组的人不愿意追加到body里，坑爹的玩意儿。

.item .item-con {
    overflow: hidden;
    zoom: 1;
}

方法四：不用float，用table-cell，这种方法还可以让左右两边的内容垂直居中，并且等高，不过IE6/7不支持：点击查看demo

.item {
    display: table;
    width: 100%;
    font-size: 12px;
    margin-bottom: 20px;
}
.item .item-title,
.item .item-con {
    display: table-cell;
    vertical-align: top;
}
.item .item-title {
    width: 85px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
}

方法五：用定位：点击查看demo

.item {
    position: relative;
    zoom: 1;
    font-size: 12px;
    margin-bottom: 20px;
    padding-left: 85px;
}
.item .item-title {
    width: 85px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    position: absolute;
    left: 0;
    top: 3px;
}

个人比较推荐用方法三，因为他能兼容所有浏览器，并且如果我的模块标题宽度如果较大话，我也只需要修改一个值就行了。其他几种方法就会需要修改两个值。

转载于:https://my.oschina.net/ito/blog/194166