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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局

一、Flex主要解决两个问题:1、元素位置:由6个容器属性和2个项目属性控制6个容器属性 flex-direction flex-wrap flex-flow justi...

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

CSS三栏布局——中间固定两边自适应宽度

转自:W3CPLUS 今天与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用...

CSS三栏布局(两边固定中间自适应宽度)的方法

-   在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查...

CSS-两侧固定宽度,中间自适应的三列布局

在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下...

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

先附上效果图: 实现思路: 1、创建一个 div 容器(content)来存放这三个色块 2、设置容器 position:relative,两侧div position:abso...

CSS_Layout三分栏__左右两栏宽度固定,中间自适应

CSS: body{ min-width:800px; } h1, h2, div p{ margi...

html--三栏布局(两边固定宽度,中间自适应)

一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px;...

实现三个并排div,两边固定宽度,中间自适应的四个方法

看了些文档和网上的资源,大概有四种方法。如有错误,欢迎各位指正。以下先贴代码再来解释 三个div并排 *{ margin: ...

实现三个并排div,两边固定宽度,中间自适应的四个方法

个人整理的实现三个并排div,两边固定宽度,中间自适应的四个方法,废话不多说,先上代码,可以直接复制看效果。 Document html,body{width:100...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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