Question

我是CSS的新手，刚从桌子毕业。我甚至不确定如何说出这个标题。我正在努力解决CSS的工作原理以及处理方式。我制作了一个我目前满意的布局和页面。由于页面上的内容，用户可能会调整页面大小。左列和右列并不像中间列那么重要。为了便于使用，最好是在最佳状态。

我的正常尺寸的页面布局是：

--------------------
|-------------------|
||    |       |    ||
||    |       |    ||
||Left|  Mid  |Right|
||    |       |    ||
||    |       |    ||
||    |       |    ||
|------------------||
|__________________||

当我调整小尺寸时，布局会发生变化：

----------------
|--------------|
||    |       ||
||    |       ||
||Left| Right ||
||    |       ||
||    |       ||
||    |       ||
|--------------|
|     Mid      |
|______________|

我希望中间人永远是最高的：

----------------
|--------------|
||            ||
||    Mid     ||
||            ||
||            ||
||            ||
||            ||
|--------------|
| Others       |
|              |
|______________|

我的CSS：

#page-wrap {
position: left;
display: inline-block;
}

#left {
width: 239px;
height: 711px;
float: left;
}

#mid {
width: 600px;
height: 600px;
float: left;
margin-left: 5px;
}

#right {
width: fit-content;
height: 300px;
margin-left: 5px;
float: right;
}

我的网页是布局：

<div class="container">
    <div id="page-wrap">
        <div id="left"></div>
        <div id="right"></div>
        <div id="mid"></div>
    </div>
</div>

如何让我的网页正常运作？

Answer 1

如果可以，我建议您使用flexbox代替floats进行布局。

You can read a good introduction to flexbox here.

以下代码段是您使用flexbox接近布局的方式。我更改了您的HTML，以便首先显示中间内容。我们可以使用order属性在调整大小时移动布局。

如果需要，您可以将em单位更改为像素。

jsfiddle

#page-wrap {
  display: flex;
  background: lightblue;
}

#mid {
  flex: 1 1 40em;
}

#left {
  flex: 0 1 15em;
  order: -1;
}

#right {
  flex: 0 1 15em;
}


/* specificy when you want the layout to change */

@media (max-width: 800px) {
  #page-wrap {
    flex-direction: column;
  }
  #left {
    order: 0;
  }
}


/* styling for demo */

#left,
#mid,
#right {
  border: 1px solid white;
  font-family: sans-serif;
  font-size: 2em;
  height: 600px;
}

<div class="container">
  <div id="page-wrap">
    <div id="mid">middle content</div>
    <div id="left">left sidebar</div>
    <div id="right">right sidebar</div>
  </div>
</div>

浮动DIV在调整大小时给出了先例

1 个答案: