假设高度已知，三栏布局，中间自适应，左右两栏固定宽度300px，为什么我的右边的那栏总是在下边？

源自：6-2 浮动与两侧皆自适应的流体布局

假设高度已知，三栏布局，中间自适应，左右两栏固定宽度300px，为什么我的右边的那栏总是在下边？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
  .wrapper {
        overflow: hidden;
    }
    .left {
        float: left;

        width: 300px;
        background: pink;
    }
    .right {
        float: right;

        width: 300px;
        background: pink;
    }
    .center {
        margin:0 300px;
        
        background: gray;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left">zuo</div>
        <div class="center">左右两列固定，中间自适应</div>
        <div class="right">you</div>
    </div>
    <script type="text/javascript">
    </script>
</body>

</html>

提问者：风到这里就是粘 2018-02-09 20:21

个回答

蜜思_error

2018-11-08 19:21:02

因为div.center是个块元素，当.div.right在设置浮动前位置在div.center后，且在它下面;float之后，从之前的位置开始脱离文档流，因此在下面。

0
朝朝暮暮兮

2018-06-22 10:25:22
```
.center {
  /*margin:0 300px;*/
  text-align: center;
  background: gray;
  position: absolute;
  right: 300px;
  left: 300px;
}
```
将.center设为绝对定位，添加左右距离300px
原来的布局里左浮动脱离文档流，中间块会忽视左边占用的位置，所以和左边在一行，用margin撑开两边的间隔，但是中间还是块级元素，且没有脱离文档流，会占用一行，右边不会忽视中间块占用的位置，所以换行。

0
慕田峪1218906

2018-02-26 21:49:42

不好用文字表述.你理解理解.因为<div class="left">zuo</div>和<div class="right">you</div>是浮动,相当于三个元素垂直排列.但是<div class="center">左右两列固定，中间自适应</div>是文本流,应该环绕在元素1那边.之所以出现你那样的情况是因为你的css的center有外边距导致的.取消margin:0 300px;外边距,你会发现3还是在下边,这是因为你是向右浮动.而文本流占据了1的所有的右侧,交换1和3位置就好了,是因为浮动并排排列,一个向左,一个向右,然后文本流环绕到中间.

0
慕斯卡3345672

2018-02-09 21:02:32

把
<div class="center">左右两列固定，中间自适应</div>
<div class="right">you</div>
位置调换即可实现三栏布局，

0