如何创建一个3列流体固定流体布局？ [英] How to create a 3 columns fluid fixed fluid layout?

问题描述

我正在寻找一个3列的css布局，在中间有一个固定的部分和在它周围的2个流动边栏：

中间宽度为250像素（例如），侧边栏最少为150像素宽度。如果浏览器宽度超过550像素（250 + 300），侧边栏的宽度应该更长。 （和中间总是250像素）

CSS可以做什么？

：我看到此页面，但我不知道如何改变它为我的愿望

解决方案

您可以尝试使用 inline-block s。它们很少使用，但有时它们对布局很好。

所以，看看这个：http://jsfiddle.net/kizu/UUzE9/ - 使用 inline-block ，您可以使用任意数量的固定和流体柱。算法：

1. 首先，将填充等于所有固定列的总和添加到包装器。然后，添加 min-width 。 250px


2. 然后，添加 white-space：nowrap


3. 然后只需添加所需的所有列。

如果您需要支持IE7及更低版本，除了常见的 inline-block 修复：

1. 您必须将 white-space：normal 返回到列的内部子元素， c：


2. 在IE中可能出现幻影滚动，也许有更好的方法来删除它，但我只是使用 overflow：hidden 。

享受：）

I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:

middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)

What is the CSS can do it? with compatibility in all browsers.

note: i saw this page, but i don't know how to change it for my wish

解决方案

You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.

So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:

1. At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
2. Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
3. Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
4. And then just add the all columns that you need.

If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:

1. You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
2. There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.

Enjoy :)

这篇关于如何创建一个3列流体固定流体布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！