html css实现左右两列固定宽度中间自适应效果

原创 2016年08月30日 16:12:12

实现有很多方法 浮动,固定定位,和css布局,这篇文章通过浮动和display:table-sell 两种方法来实现。

1.float和margin
css部分:

.main{overflow:hidden;min-width:405px;}
.left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
.left {background-color: #00acac;width: 200px;float: left; }
.right {background-color: #0000ff;width: 200px;float: right;}
.center {background-color: #000000;margin:0 200px;}

html部分

<div class="main">
    <div class="left">
        <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
        <p>ssssssssssssssssssssssssssssssssssssssssss1111111111111111111111111</div>
    <div class="right"> <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
        <p>sssssssssssssssssssssssssssssssssssssssss</p>
        1111111111111111111111222222222222222222</div>
    <div class="center"> <div>sssssssssssssssssssssssssss</div>
        <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
        1111111111111111字文字文字文字文字</div>
</div>

2.display:table-cell 这种实现更简单 只是不支持ie7 ie6

css部分

.main {display: table;min-width: 320px;width: 100%; }
.left{width: 200px;display: table-cell;background-color:#00acac; }

html部分

<div class="main">
    <div class="left">然后发现都对对方一见钟情后然后发现都对对方一见钟情后然后发现都对对方一见钟情后</div>
    <div>
        <span>,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。</span>
    </div>
    <div class="left">有一天他们相遇了有一天他们相遇了有一天他们相遇了有一天他们相遇了</div>
</div>
版权声明:本文为博主原创文章,未经博主允许不得转载。

三列自适应布局:左右定宽,中间自适应

一个不定宽度的容器被分为左中右三列,左右两列定宽100px,中间列自适应剩余宽度,且三列之间间距为10px。 1.float+margin+fix HTML结构如下 左侧定宽 中...
  • GiGiTea
  • GiGiTea
  • 2015年11月27日 15:47
  • 938

Swiper滑动Html5手机浏览器自适应

HTML5网页手机浏览器自适应
  • dyyaries
  • dyyaries
  • 2015年06月10日 15:21
  • 25237

html 三列布局(两列固定宽度,一列自适应)

摘要:最近在做移动端页面布局,偶有心得,记录于此。
  • mika85489
  • mika85489
  • 2016年08月17日 21:13
  • 1778

html css实现左右两列固定宽度中间自适应效果

实现有很多方法 浮动,固定定位,和css布局,这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分:.main{overflow:...
  • u014665035
  • u014665035
  • 2016年08月30日 16:12
  • 1436

DIV+CSS三行两列经典布局

师阿捷2004年发布在《网页设计师》上的,一个非常经典的布局,在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在阿捷的代码基础上作了部分修改):<html><hea...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年12月29日 16:02
  • 786

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...
  • qq846294282
  • qq846294282
  • 2016年12月20日 17:06
  • 1903

DIV+CSS左右两列自适应高度的方法

DIV+CSS左右两列自适应高度的方法-HTMer .main{500px;overflow:hidden;} .left{width:100px;background-color...
  • lo11ve
  • lo11ve
  • 2016年03月11日 16:41
  • 1329

典型的三行两列居中高度自适应布局

  • 2009年02月17日 09:03
  • 32KB
  • 下载

CSS三列自适应布局

转自:http://www.cnblogs.com/xiaohuochai/p/5455905.html 前面的话   前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列...
  • cometwo
  • cometwo
  • 2016年05月07日 16:43
  • 1723

css两列布局,一列固定宽度,另一列自适应宽度

两列之一固定,另一列自适应 1-2-1单列变宽布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; ...
  • wuzhe128520
  • wuzhe128520
  • 2016年05月02日 15:48
  • 1794
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html css实现左右两列固定宽度中间自适应效果
举报原因:
原因补充:

(最多只允许输入30个字)