三列布局：固定宽度中心与流体侧柱 [英] Three column layout: fixed width center with fluid side columns

问题描述

我试图在CSS中实现一个设计，它将在
主体上有一个平铺的背景。我想在内容背景中使用png图像作为身体背景上的椭圆形
不透明蒙版。侧栏（以及带有剪辑溢出的支撑页脚
）将具有部分不透明的黑色背景，
将匹配.png面罩的边缘。

目的是要有一个具有复杂背景的固定尺寸中心区域
模式，将填充任何大小的浏览器窗口。

我怎么会把这个。 margin：auto 似乎不会
足以满足我的背景要求，我不认为我可以添加一个
大型固定支柱侧栏而不失去我的中心。

这里是一个粗糙的模型

解决方案

根据您的屏幕截图你可以这样写：

  body {
 background：url（image.jpg）repeat center center; 
} 
 
 .container {
 width：500px; 
 margin：0 auto; 
} 
  

UPDATED： b

根据您的问题的解决方案三列布局：带有流体侧列的固定宽度中心

< h2> http://jsfiddle.net/XMg2h/3/

但它在现代浏览器中有效

UPDATED

http://jsfiddle.net/XMg2h/10/

它适用于所有浏览器

I'm trying to implement a design in CSS that will have a tiled background on the body. I want to use a png image in the content background as an oval-shaped opacity mask over the body background. The side columns (and a propped footer with clipped overflow) will have a partially opaque black background that will match the edges of the .png mask.

The intention is to have a fixed dimension center area with a complex background pattern that will fill any size browser window.

I can't think how I would pull this off. margin:auto does not seem like it will be sufficient for my background requirement and I don't think I can add a large fixed prop to the side-columns without losing my centering.

Here's a rough mockup of the layout.

解决方案

As per your screenshot you can write like this:

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

UPDATED:

Solution according to your question Three column layout: fixed width center with fluid side columns

http://jsfiddle.net/XMg2h/3/

But it's work in modern browsers

UPDATED

http://jsfiddle.net/XMg2h/10/

it's work in all browsers

这篇关于三列布局：固定宽度中心与流体侧柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！