Question

网站内容为双列，右边是固定的，左边是液体，最小和最大宽度。我有这个，但现在我有问题创建一个液体，4柱的页脚下面。我拥有它的方式使得列看起来像楼梯。

当窗口被拉伸时，我需要它们全部正确排列，两者之间的空间相等。列本身的宽度也各不相同。

修改

我意识到我犯了一个错误，这导致了列的步骤，所以现在我可以继续找出如何在页脚中均匀分隔它们。这是我的CSS：

#footer .col1, #footer .col2, #footer .col3, #footer .col4{
    float: left;
    padding: 10px 0;
}

#footer .col1{
    width: 75px;
}

#footer .col2{
    width: 375px;
}

#footer .col3{
    width: 325px;
}

#footer .col4{
    width: 100px;
}

我曾经把宽度作为百分比，但它没有像我想象的那样均匀地隔开它们。谢谢你的帮助！

Answer 1

以下内容将为您完成：

<强> HTML

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

<强> CSS

#footer .column {
    float: left;
    width: 25%;
    background: red;
}

#footer .column div {
    margin: 10px;
    height: 100px;
    background: blue;
}

in action here.

我正在使用嵌套的<div>结构来展示如何在两者之间保持固定距离的液柱。使用％和固定宽度尺寸时的关键是如果要确定宽度，则不要将它们应用于同一元素。在实际网站中，将固定水平边距应用于嵌套元素更有意义，而不是像我一样创建嵌套div结构。

您的列很可能会因为它们太宽而无法放在同一水平线上而踩下。你会注意到在我的例子中，4个外部div的宽度加起来为100％。任何更多（比如通过添加边距/填充）都会导致你看到的下降。

Answer 2

没有看到标记，我不确定如何解决问题。我会像这样打开页面：

````````````````````````````````````
|body_______________   __________  |
|| left             | |   right  | |
||__________________| |__________| |
||````````````````````````````````||
|| footer                         ||
|| |``````||``````||``````||``````|| 
|| | .col ||.col  || .col || .col ||
````````````````````````````````````

使用css：

#footer { width:100%; clear:both; }

#footer .col {
  width:25%;
  float:left;
  display:block;
}

如何创建一个4柱的液体页脚？

2 个答案: