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

该网站的内容分为两列，右侧为固定内容，左侧为液体内容，最小和最大宽度。我已经记下来了，但是现在我在创建一个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;
}

---

我曾经用百分比表示宽度，但它不像我想象的那样均匀地隔开它们。谢谢你的帮助

没有看到标记，我不知道如何解决您的问题。 我会这样布置页面：

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

使用css：

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

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

---

以下内容将为您提供帮助：

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>

及

我使用嵌套的

结构来展示如何实现固定间距的液柱。使用%和固定宽度标注的关键是，如果要确保宽度，请不要将它们应用于同一元素。在活动站点中，将固定水平边距应用于嵌套元素比创建嵌套div结构更有意义

---

您的列很可能会向下移动，因为它们太宽，无法在同一水平线上对齐。在我的示例中，您会注意到4个外部div的宽度加起来是100%。任何更多的东西（比如添加边距/填充）都会导致您看到的下降。

做一些简单的案例标记来说明问题，这将是一个更好的问题。唯一需要添加的是，他希望页脚列具有不同的宽度-

width:auto和间距相同，
边距：0,2.5%
。否则，是的，我会用同样的方法。最好在每列上添加一个类“column”，而不是选择所有的div。设置演示很好。谢谢您的帮助！我已经在我的代码中尝试过了，但是它保持了列的宽度相等。我可能忽略了一些非常简单的事情：@Elly我不确定您在代码中要做什么。不幸的是，使用%宽度和固定宽度会产生问题。四个25%宽度的外部
将随着窗口（液体）的变化而改变大小，因此它们不会总是足够大以容纳您使用固定宽度的内部列。当你说“将它们均匀地隔开”时，你的意思是：所有列的宽度相同（%或px）？所有列之间具有相同间距的不同固定宽度（px）？不同液体宽度（%）之间的间距相同？@Pat很抱歉之前没有澄清！我想要实现的是不同固定宽度的列，当页面拉伸时，这些列之间的间距总是相等的。这是应该是液体的两个空间。@Elly不幸的是，我不确定这是可能的。我能想到的最接近的方法是在
#footer
上设置一个
minwidth
，即所有4个列宽的总和+一点额外的宽度。然后将%的水平边距添加到4列中…不过这最多也只是一个小问题（即，无法保证在某些屏幕宽度下不会删除第4列）。
#footer .column {
    float: left;
    width: 25%;
    background: red;
}

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