3 列与 div 正确对齐答案

【问题标题】：3 columns to align correctly with divs3 列与 div 正确对齐
【发布时间】：2009-08-18 21:47:32
【问题描述】：

进展如何。我刚开始学习一些关于 joomla 的知识，并且在制作模板时试图让我的 div 垂直对齐。问题是右侧 div 位于右侧页面底部的下方，并且中心 div 与左侧 div 下方至少 1 个字符高度对齐，这是唯一正确对齐的。我也看不到页脚 div（可能是因为图像和文本都是纯黑色的。）左、右、中心和页脚 div 位于容器 div 中。我在 Firefox 中预览了它，虽然容器图像和边框正是我想要的位置，但 div 内容到处都是。这是css代码，任何帮助都会很棒。我还将在 css 下方粘贴 Div id 和结构。提前致谢。

body{
margin: 0 auto;
background-color: #000000;
background-repeat: repeat;
text-align: center;}

#container {
width: 900px;
height: 759px;
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
background-repeat: no-repeat;
background-image: url(../slices/images/images/content-slice.jpg);}

#searchbox{

}

#header{
width: 900px;
height: 104px;
background-repeat: no-repeat;
background-image: url(../slices/Sf-Head-slice.jpg);
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
text-align: left;}

#header2{
width: 900px;
height: 108px;
background-repeat: no-repeat;
background-image: url(../slices/searchboxwithplayer-slice.jpg);
margin: 0 auto;
border-left:5px #ffffff solid;
border-right:5px #ffffff solid;
text-align: left;}

#footer{
width: 900px;
text-align: left;
margin: 0 auto;
height: 28px;
background-repeat: no-repeat;
background-image: url(../slices/images/footerslice.jpg);}

#left{
text-align: left;

margin: 0 auto;
width: 220px;
height: 752px;
float: left;}

#right{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: right;}

#center{
text-align: left;
margin: 0 auto;
height: 752px;
width: 400px;
}

这里是 div

<body>
  <div id="header">this is the header</div>
  <div id="header2">this is header2
<div id="searchbox">this is the searchbox
</div>
</div>
  <div id="container">this is the container
<div id="left">this is the left column</div>
<div id="center">this is the center column</div>
<div id="right">this is the right column</div>
<div id="footer">this is the footer</div>
</div>
</div>

</body>

【问题讨论】：

标签： css templates html joomla

【解决方案1】：

列没有并排排列的原因是中间列没有浮动。 margin: 0 auto 也无济于事。浮动列的规则是确保您希望彼此相邻的所有元素宽度的总和

220 + 220 + 400 < 900

一旦你浮动所有的列，然后用页脚清除，你应该开始做生意了。我还根据名称更改了页脚背景图像的重复方式（我假设它是您想要水平平铺的薄片）。

#footer{
    clear: both;
    text-align: left;
    height: 28px;
    background: url(../slices/images/footerslice.jpg) repeat-x top left;
}

#left, #right, #center {
    text-align: left;
    height: 752px;
    width: 220px;
}

#left {
    float: left;
}

#right {
    float: right;
}

#center{
    float: left;
    width: 400px;
}

【讨论】：

【解决方案2】：

我没有使用 Joomla 的经验，我的 CSS 知识无法提供真正的答案，但如果你想要一个有效的多列布局，你绝对应该看看 YAML（不是 YAML 语言，那是另一回事）。也许您可以将他们的 CSS 部分或作为一个整体。即使您不能，他们的documentation 也非常具有描述性，并且会教您很多与多列布局相关的注意事项。

【讨论】：