Question

我的网站左侧是图片栏，右侧是导航栏，内容是灵活的宽度中央栏。

编辑：这些列都是DIVS

当前

----------------------------------------------------
|              |                   |               |
| Column left  |   Centre Column   | Column right  |
|   (305px)    |                   |    (250px)    |
----------------------------------------------------

左右列的宽度固定，中间列填充空间。

我想知道的是如何在较高的窄设备上重新排列移动设备的布局，我打算（由于左右列的相对狭窄）重新排列CSS宽度小于〜 850px，布局变为：

拟：

----------------------------------
|                 |              |
| Column left     | Column right |
|   (305px)       |   (250px)    |
----------------------------------
|                                |
|          Centre Column         |
|              (100%)            |
----------------------------------

以屏幕空间为中心。

（在非常狭窄的屏幕上，这进一步叠加为：

----------
|  Left  |
----------
| centre |
----------
|  Right |
----------

）

目前左右列都是中心周围的浮动，所以我要问的是，我是如何（或应该）接近媒体特定的CSS规则来将左右浮动显示为如上所示？

我想这样做如果可能的话而不改变页面上的HTML（有很多页面要处理）。我无法使用flexbox，因为这需要尽可能向后兼容。

关于SO可能已经有很多答案，但是我找不到它们，可能是因为搜索了错误的描述，术语等等。我已经发现所有答案似乎都基于列都是静态的已知宽度，而中心柱的填充宽度为(100% - left column - right column)。

编辑/澄清：

我正在使用媒体查询，但我问的问题是我可以在媒体查询中添加什么来获得所需的结果。
由于读到IE10存在flexbox和长段落问题（以及其他小问题），我对使用flexbox持谨慎态度。
当前布局使用HTML div元素。没有桌子。
中间列文字很重，宽度可变，另外两列是静态宽度（左边：305，右边：250），这些列不能改变。

Answer 1

为此，您需要在CSS中进行媒体查询：

@media (max-width: 900px) {
  .left,.right { display: inline-block; width: 50%; }
  .centre { display: block; width: 100%; clear: both; }
}


@media (max-width: 600px) {
  .left,.right, .centre{ display: block; width: 100%; clear: both; }
}

这是向左和向下中心的<900像素。至＆lt; 600像素全部是垂直的

使用CSS进行HTML列重排

1 个答案: