三个div 两边固定大小中间自动大小

最新推荐文章于 2021-06-14 13:44:42 发布

坚持小P

最新推荐文章于 2021-06-14 13:44:42 发布

阅读量2.9k

点赞数 3

分类专栏： Css

本文链接：https://blog.csdn.net/Goblin_J/article/details/52086026

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做公司一个项目，涉及到手机呈现页面，当时有个需求就是实现一个列表展示功能，左边是图片，中间标题文字介绍啥的，右边是操作按钮，想想很简单嘛，一分析搞三个div排一下，两边的固定宽度，中间的自动宽度，左边div左浮动，右边div右浮动，中间宽度auto这样可适应各种手机了。

可是实际写起来确实出了些问题，咱们先看代码：

<html>
<head>
    <title></title>
    <style>
        body div {
            padding: 0px;
            margin: 0px;
        }

        div {
            height: 60px;
        }

        .left {
            float: left;
            width: 200px;
            background-color: green;
        }

        .center {
            background-color: red;
            margin-left:200px;
            margin-right:200px;
        }

        .right {
            float: right;
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="left">左边区域</div> 
    <div class="center">中间区域</div>
     <div class="right">右边区域</div>
</body>
</html>

乍一看so easy，写好了，于是打开页面一看，什么鬼：

为毛右边的div跑下面去了，不是说好的float=right的么？你咋浮动到右下了，于是楼主很捉急，找啊找，网上找到一篇实现相同功能的例子，div都一样三个，样式也差不多，找了半天都不知道为啥，后来我就看他代码，发现他中间那个div写在最后：

 <div class="left">左边区域</div>
    <div class="right">右边区域</div>
    <div class="center">中间区域</div>

我一看，觉得不太可能是位置问题，估计我样式受啥影响了，找了半天找了快崩溃了，要不试试丢最后？

结果一丢发现果然好了

于是网上查查浮动的介绍，才发现浮动是不在标准流中，说白了就是不喝中间区域在同一层，而中间的div是块级元素，左浮动后面加上div后，独占一行，所以第三个div加到后面后另起一行开始，所以跑右下了。所以把右边div写到左边div后面，还在第一行中，浮动到右侧，最后加上中间的div就可以了

坚持小P

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
三个div 两边固定大小中间自动大小

最近做公司一个项目，涉及到手机呈现页面，当时有个需求就是实现一个列表展示功能，左边是图片，中间标题文字介绍啥的，右边是操作按钮，想想很简单嘛，一分析搞三个div排一下，两边的固定宽度，中间的自动宽度，左边div左浮动，右边div右浮动，中间宽度auto这样可适应各种手机了。可是实际写起来确实出了些问题，咱们先看代码： body div {
复制链接

扫一扫