当前位置: 首页 > 面试题库 >

三列布局:固定宽度的中心,带有流体侧列

翁烨霖
2023-03-14
问题内容

我正在尝试在CSS中实现一个设计,该设计在主体上具有平铺的背景。我想在内容背景中使用png图像作为主体背景上的椭圆形不透明蒙版。侧栏(以及带有修剪过的溢出的支撑的页脚)将具有部分不透明的黑色背景,与.png蒙版的边缘匹配。

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

我想不出该怎么做。margin:auto似乎不足以满足我的背景要求,并且我认为我可以在不丢失居中位置的情况下向侧栏添加大型固定支柱。


问题答案:

根据您的要求,screenshot您可以这样编写:

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

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

更新:

根据您的问题解决 Three column layout: fixed width center with fluid side columns

但这在现代浏览器中有效

更新

在所有浏览器中都可以使用



 类似资料:
  • 问题内容: 我的要求很简单: 2列,其中正确的列具有固定的大小 。不幸的是,无论是在stackoverflow上还是在Google中,我都找不到可行的解决方案。如果我在自己的上下文中实现,那么那里描述的每个解决方案都会失败。当前的解决方案是: 我得到以上代码的以下内容: 请指教。非常感谢! 问题答案: 除去左列上的浮子。 在HTML代码处,右列必须位于左列之前。 如果右边有一个浮点数(和宽度),并

  • 问题内容: 我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。 有什么建议吗?我已经尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。 我不是专家,所以我不知道采用哪种方法: 三列,每列的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个想法,因

  • 问题内容: 我想知道这里是否有人对下面的两栏css布局有一个相当简单的教程。左固定列和流体含量列,具有页眉和页脚以及相等的列高。 问题答案: 试试这个动态驱动器布局及其亲戚(我是通过类似的问题向我指出的)。

  • 问题内容: 我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。 有什么建议吗?我尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。 我不是专家,所以我不知道采用哪种方法: 三列,每边的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个主意,因为我

  • 问题内容: 我有一个将具有此CSS的div: 现在,如何才能使该div居中?我可以使用,但是只有在屏幕大于900像素时才能使用。之后(当窗口<900像素时),它将不再居中。 我当然可以用某种js来做到这一点,但是用CSS做到这一点“更正确”吗? 问题答案: 您可以居中或定位的元素设置和到,然后与以,如果你是一个中心定位的元素。

  • 问题内容: 是否可以将宽度设置为相同的高度(比率1:1)? 例 CSS 问题答案: 使用jQuery,您可以通过以下方式实现此目的