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

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

如下图:

layout_lr

像这种结构的,如果是固定布局那直接两边都固定宽度然后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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值