Question

怎么样了。我刚开始学习一些关于joomla和我试图让我的div在制作模板时垂直对齐。问题是右边的div位于右侧页面的底部，而中心div在左侧div下方至少对齐1个字符，这是唯一正确对齐的。我也无法看到页脚div（可能是因为图像是纯文本的黑色）。 left，right，center和footer div位于容器div中。我在firefox中预览了它，虽然容器图像和边框正是我想要的地方，但是div内容到处都是。继承了css代码，对此的任何帮助都会很棒。我还将Div ID和结构粘贴在css awell下面。提前谢谢。

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;
}

继承人divs

<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>

Answer 1

列没有彼此排列的原因是因为中心列没有浮动。保证金：0自动也没有帮助。浮动列的规则是确保所需的所有元素宽度的总和是＆lt; =其容器的宽度。在你的情况下，你会没事的，因为：

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;
}

Answer 2

我没有使用Joomla的经验，我的CSS知识非常粗糙，无法提供真正的答案，但如果你想要一个有效的多列布局，你一定要看看YAML（不是YAML语言，那是另一件事）。也许你可以把他们的CSS作为partky或整体。即使你不能，他们的documentation也非常具有描述性，并会教你很多关于多列布局的警告。

3列与div正确对齐

2 个答案: