小利的博客

前端新手----

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

实现有很多方法 浮动,固定定位,和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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014665035/article/details/52370322
文章标签: css3 html
个人分类: html css
上一篇Animate css3动画 使用文档
下一篇transform的一些属性
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭