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

相关文章推荐

html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)

参考文章:http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d 参考文章:http://www.cnblogs.com/webmoon...

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

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

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

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

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...

CT图像重建技术

由于csdn贴图不方便,并且不能上传附件,我把原文上传到了资源空间CT图像重建技术 1.引言 计算机层析成像(Computed Tomography,CT)是通过对物体进行不同角度的射线投影测量而...

Matlab绘图-很详细,很全面

Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数。此外,Ma...

linux查找目录下的所有文件中是否含有某个字符串

查找目录下的所有文件中是否含有某个字符串  find .|xargs grep -ri "IBM"  查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名  find .|xargs g...

Radon变换入门matlab CT原理

http://hi.baidu.com/hi9394/blog/item/0d492b8bfd714700c8fc7aa9.html 简介 图像投影,就是说将图像在某一方向上做线性积分(或理解为累...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html css实现左右两列固定宽度中间自适应效果
举报原因:
原因补充:

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