相对简单 3等高度列CSS液体布局

分享于 

20分钟阅读

Web开发

  繁體
。屏幕截图- 3 col演示

索引

简介

前言

当面对基于( X ) HTML的布局时,它是最烦人的问题之一,所有的web开发人员都知道它: 3 等高度列布局。 目前最好的解决方案是( 或者如果你不喜欢我的解决方案) faux方法,它使用 background 图像来模拟列。 问题是我在研究一个应该更多的'灵活的',而人造柱方法不是灵活性最好的例子。

My的解决方案试图满足灵活性,同时允许使用 2.甚至更高的高度列( 仅通过 background-color CSS属性指定 background )。

注意:为了在网页中只使用XHTML而不支持HTML请求,我不得不更改一些文章样式,因为站点不是XHTML兼容的,但我在 HTML 3.0网站"等等 ) 中不支持 HTML。

优势和缺点。

像每个解决方案一样,我的优势和缺点。 就像你所得到的一切和你在获取它时失去的。

优势
  • 非常灵活的液体布局,使你可以使用混合尺寸( 例如像素固定左柱和百分比固定)
  • 弹性中心列,需要时调整大小
  • 无伪列( 不需要图像)
  • 仅使用XHTML和 CSS,没有脚本,没有条件注释
  • Works,Works,Opera,Safari,Safari,Safari,Safari,Safari,),),),),),),),),),),)。
缺点:
  • 使用一些额外的div 代码,标记有点重
  • CSS也有一点重,使用 3个黑客和 2修复
  • 在[ 9 ] 中,如果在类似的行为( 参见 Notes ) 中出现了一个未解决的问题,那么 Netscape update
  • 可能其他人

方法

relative 和 overflow

在HTML中有三个垂直列,中间有一个弹性。 这就是把三个 div 放在相邻的地方,然后对它们进行 float 处理。 但是,要使这些列的高度相同,我们必须使它们的背景显示为相同高度。 HTML语言的一个关键特性是每个容器( 主要是每个元素) 具有一个默认的透明 background,从而使得它有可能拥有与第一个元素相同的background 无限的重叠层。

在获得三个相等高度列的问题时,在获得相同高度的情况下,我们将用相同高度( 即我们放置的3个实际包含列的columns ) 来计算视图的

当考虑获得这个" 3 -stripes-view"的方法时,我开始考虑我首先需要什么: 也就是说,一种使HTML元素具有相同高度的方法,而不管它是高的。 我们知道,使用块级元素 inside 是可能的。 所以,需要把 div,每一个 inside,并移动它们,以获得我们的三条条纹"视图。",我们的三个实际的( 也就是说物理上) 列。 使用属性( 这样我们就可以把孩子的div ) 和 overflow: hidden ( 它允许我们隐藏子 div的那些部分,否则就会 overflow的父空间)的CSS position: relative 是可能的。

让我们看看整个工作是如何工作的:

这里我们有一些例子,以解释一步,并详细地说明关键概念如何工作。 每个示例包括 2 div,其中一个带有蓝色 background ( div.parent-box ),另一个带有黄色的background ( div.child-box )。 这些 div 代表我们稍后要创建页面宽列的内容。 蓝色 div容器,而 yellow one contained box box。 在示例框附近有一个 table,它分别显示为元素设置的CSS属性。 我只放入了最重要的元素,并删除了那些只使事情显示更清晰的( 比如 border )。

第一个是空的例子。 即,两个简单的父 div 和子:

第二个示例介绍了relativeness的概念:

以下示例显示了将父对象的overflow 属性设置为 overflow: hidden 时发生的情况。 正如你所看到的,子框被切断,父框中的一个轮廓结束了:

更多 relative 和 overflow。

现在我们已经看到了基础概念如何工作,让我们使用 3个 div ( 那将是我们最后一页的wide ) 来更复杂一些。

正如我们可以创建'条纹'( 即列 background ),只是将父 background 颜色设置为我们想要的颜色的颜色。

当添加 3条条纹时,当我们移动第一个孩子时,第二个孩子会明显地转移( 我们可以把第二个孩子叫做"孙子,"作为父进程的子级的子节点)。 因为我们必须从右边的( 创建右条纹的步骤) 转移,我们需要让孙左 margin 重叠父右 margin ( 我们应该把它叫做 grandfather)。 这样我们就可以将 relative 移位从右边等于我们想要的右列的宽度。

使这些边距重叠的最佳方法是重置子元素的位置,即使左边的边距重叠,然后添加一个0 位的边。 我们将使用子和孙之间的附加容器,将这些样式应用到这个新容器中,这将被称为 reset-box。 之后,我们将让孙子左 margin 重叠"grandfather"右 margin。 现在我们需要做的就是右移孙子,成为我们想要的右栏的宽度。

最后要做的是调整内容位置。 实际上,所有的内容现在都放在 grandson does。 简单地应用同样的方法,我们在孙和内容之间添加一个附加容器,调用它 content-box。 在左栏中相对左移,将它的left-margin 设置为 -100 % ( 注意减号),从而使它的左边缘重叠到原始父元素的左边边距。

下面的示例显示了 上面 猜测的结果。 左边栏的宽度为 40px,而右边的宽度为 25%。 请仔细看看标记和新款式,以了解 上面 宽度值的位置,以及整个事件的工作方式:

下面的示例显示与 上面 ( 示例 4 ) 相同的示例,但将父蓝色的框属性 overflow 设置为 overflow: visible,从而使包含的框完全可见。 另外,我放了一些空白来使事情更加清晰。

以下示例显示与 上面 ( 示例 4 ) 相同的示例,但将其父blue像框宽度设置为更高的值: width: 400px。请注意,更改布局宽度只需要更改主容器的单个CSS值。 还要注意,因为我们选择了一个固定的宽度为 25%的固定宽度,因这里也会相应地改变它的大小。

让我们放两个位置。

现在我们已经了解了关键概念如何工作,让我们用两个列来做第一个例子。 它的前三个条纹示例的结构相同,但是它的内容将被浮动来创建两个列的物理结构。

从现在开始,我们将改变名称( 和CSS类),我们将在将来引用容器 div s。 之所以这样做是因为从现在开始我们将讨论列( 也物理的),所以条带 div的( 我们用来创建列背景的div ) 将被称为 column,除了主容器( 其中包含其他一切的那个) 之外,它还可以被称为 main-box

下面的示例显示了两个列示例。 注意,尽管为清晰起见,我没有在CSS代码 table 单元格中放置任何边框样式,但 main-box 容器 div

边框是否存在

我提到 上面,在添加边框时,一切都变得更加复杂。 在添加外部边框时没有变化- 你只需要在 main-box 容器中设置相应的边框- 当你试图在列之间添加边框时出现问题。

原因是在容器中放置边框时,容器的子边框不会与父容器的边框重叠。 相反,它将在下一 因这里,当我们的儿童 div s 相对移动时,它们的位置将以等于前面的边框大小进一步移动。

以下示例与 5 ( 我也使用同样的文本内容) 相同,但在两列之间添加了边框。 这是通过设置 right-box 容器 border-left 属性来实现的。 我将一个大的边界( 10px ) 放在 Highlight 中,解决了这个问题:

正如你可以看到的,布局全部移动到与边框宽度相同的大小。 我们只需要从右边重新设置整个布局的最终位置,就像上面的左边界宽度一样。 另外,我们需要在 rightdiv 中放置相同维度的padding-left,以避免后者重叠边界。

以下示例与示例 5.1相同,但使用上述两个更改来调整布局的布局:

他们中的三个

现在已经讨论了所有关键概念,我们可以介绍一个名为with的第一个完整示例。

下面的示例显示了我们的最终 3等高度列结构。 正如你从标记代码 below 中看到的,right-box 将它的NAME 改为 center-box,因为它成为我们的布局( 新的绿色像右栏插入) 中心。 除了改变 NAME 之外,CSS样式仍然保持不变。 还要注意,在以下示例中,宽度设置为左栏为 25%,右边为 40px,中间栏填充剩余空间:

以下是同一个示例 6,更广泛的main-box 容器。 我增加了它的宽度来展示布局是如何灵活的,并且能够适应它所放置的空间。 我在列中保留了相同的文本内容,以区别不同:

如图,left宽度 set 25% set,因为它被设置为 ,而右栏宽度 remained 40px。 同样,正如你可以看到的,中心柱( 这是弹性的) 填充剩余空间,因这里,它的高度减少了。 事实上,现在最高的列是正确的,你可以看到,所有的背景都是相同的高度。

代码

标记标记。

关于disadvantages部分,我已经提到,标记包含超过标准( 确切的数字取决于你通常的布局风格)的3 -4 div 值,有些人无法接受它。 我可以说,div 可以减少在边界和容器重新设置位置所需的周围的工作,而容器则可以减少。 无论如何,这 3个额外的div 不是我的一个大问题,试图找到减少数量的方法。

这是( X ) HTML标记:

<divclass="main-box"><divclass="center-box"><divclass="reset-box"><divclass="right-box"><divclass="content-box clearfix"><divclass="left"></div><divclass="right"></div><divclass="center heightfix"></div></div></div></div></div></div>

样式

below 是工作布局的干净和 ready-to-use CSS代码。 虽然代码看起来很难,但是在仔细阅读后,如果你认识到( 在第 2节中解释了)的方法,我认为你需要改变。 例如如果希望增加列的宽度或者更改 background 颜色和。

这就是CSS代码:

div.main-box {
position: relative;
width: 500px;
overflow: hidden;
background: #D0E1E1;
border: solid 1px #993333;
}
div.center-box {
position: relative;
width: 100%;
left: 25%;
background: #FFFFCC;
border-left: solid 1px #993333;
}
div.reset-box {
position: relative;
width: 100%;
left: 100%;
margin-left: -25%;
}
div.right-box {
position: relative;
width: 100%;
margin-left: -40px;
background: #D0EEC0;
border-left: solid 1px #993333;
left: -2px;
}
div.content-box {
position: relative;
width: 100%;
margin-left: -100%;
left: 40px;
}
div.left {
float:left;
width:25%;
}
div.right {
float: right;
width: 40px;
text-align: center;
text-transform: uppercase;
}
div.center {
margin-left: 25%;
margin-right: 40px;
padding-left: 1px;
padding-right: 1px;
}
* html div.center {
height:1%;
margin:0;
}
* html div.left {
margin-right:-3px;
}
* html div.right {
margin-left:-3px;
}
.clearfix:after {
content:"."; 
display: block;
height: 0px;
clear: both; 
visibility: hidden;
}
.heightfix:before {
content: '.';
display: block;
visibility: hidden;
height: 0;
}

示例

三列空

下一个是一个完整的示例,包含三个列加上一个 header 和一个页脚。 这里没有内容,只是一些 <br&frasl;>,让布局在高度上增长。 这里的宽度为左栏为 120px为,而整个布局宽度为 80%。

三列和内容

有关详细信息/信息,请参阅以下示例。

三栏,内容和边框。

下面是一个真实的假想示例布局。 我添加了内容和样式使它看起来像一个普通的( ugly) 网站看起来像。 在下一个代码 table 中,我删除了真正的内容,并用占位符替换它们以节省空间。 如果你想查看更多信息,请查看工作示例源代码。 另外,我从样式代码中删除了所有与三列布局需要不相关的样式。 在下一个 table 中你将看到的CSS代码包含在名为 threecol.css的ready-to-use CSS文件中,你可以从 table 本身底部的链接中检索到它。 我已经准备好了这个文件,可以在你自己的页面中使用,也包含( 在CSS注释中)的详细描述,exaplain什么值,你可以很容易地改变它们,让你可以很容易的改变它们的布局。

四列。

在下面的示例中,我将尝试使用我的方法创建具有 4列的布局。 虽然这个布局可能不那么有用,但是它可以方便地学习整个方法的工作方式。

五行

最后一个例子仅用于教学目的。 我不认为有人会需要这样的东西。

注释

布局问题:

这个解决方案总是存在问题。 直到现在,我没有发现任何问题,除了那些 Netscape。 我发现这个浏览器总共有 3个问题,并解决了前两个问题。 第三个仍然未解决,但我认为这个问题的解决方案也是一个解决方案。

Netscape问题--与 9固定

如上所述,在option选项"显示为 Firefox"( v 8.1.3 ) 使用浏览器,当整个布局lower显示区域高度时,#main-box 容器在右侧显示它的背景 1px。 解决这个问题的方法是为 html 标签设置一个 overflow: scroll。 你可以在所有 3列示例中使用的style.css 文件中看到这一点。

另外还有一个小问题( 使用 Netscape,但与选项一起使用"显示,如 IE"),我发现了一个解决方案。 当你在 #left-box#center-box 或者 #right-box 列中使用命名锚时出现问题。 即,当你单击指向指定锚点的链接时,浏览器会跳回到被单击的锚点。 为此,只需在上面提供的工作示例中,用 0的值为命名锚点设置一个 tabindex 属性即可。

还没有解决的问题还关注命名锚。 这种行为有点类似于超级填充,除了只显示网关和 LESS 痛苦之外。 在页面中命名锚,并点击指向指定锚点的链接时,它会按 工作,而不会产生任何问题。 问题出现在你按下刷新按钮( 在url中选择已经命名锚点,例如 http://somesite.com/somefile.html#mylink。)的时候。 相反,如果按url附近的go按钮,浏览器会正确显示页面。 我知道这有点奇怪,但幸运的是,它也可以忽略,因为它的古怪。

注释: 因为他们已经解决了新版本的Netscape Navigator ( 版本 9.0 ),所以这些问题是灰色的,所以我认为现在它们不再重要。

比我所能看到的更多的列。

如果你真的理解我的方法,那么你就不难猜到如何添加更多。 i i none columns columns columns columns columns columns columns examples examples examples try try try try try method method method method method method method method method method method。

正如你应该学到的阅读文章一样,布局基本概念是相对移动和不可以信( 重置)的位置。 因此,当你更改( 容器的移动) 时,你需要某种方式来重置更改( 也就是说取消运动)。 因此,你需要两个,它允许你移动两个不同的容器,。 一个容器来添加列,一个额外的透明 ( 一种不包括它的颜色的布局) 容器来调整布局位置。 总而言之,如果中心不是一列,而是填充物,真实的柱子需要一个值,另一个容器还原位置。 如果你需要设置左边框,另外还需要一个附加值来重置左边边界,如果你有超过 1个右边框,那么你可以在最后一个容器中设置另一。

我做了一个计算,这可以能是错误的,获得的容器数除了通常的时候,布局超过 3列。 正如我所说,我相信它是错误的/不确定的,但是对于给定数量的列,一般的意思是: 你必须将实际列(。即,布局列 LESS 1,中心)的总数加倍,并添加 1. 例如,对于 4-columns 布局,需要( ( 4 -1 ) *2 ) +1 = 7容器;对于 5-columns 布局,需要( ( 5 -1 ) *2 +1 = 9容器等。


COL  REL  Layout  column  高度  相对  
相关文章