html - 将顶部的 3 个 div 列与影响其状况的各种内容对齐

Question

我已经在 google 和 SO 上搜索了这个问题的解决方案，但没有找到，这可能是因为我不确定如何最好地表达它。

问题是:

我有一个使用 div 的 3 列页面。 div分别是左、中、右容器div，里面有各种内容。我需要他们做的是从顶部水平对齐。他们目前正在做的是一些锯齿状的拼图对齐。我相信这是因为里面的内容(因为我已经改变了其他所有内容而没有结果)，从标题周围的填充到文本，像按钮一样的 fb 等等。正如你在这里看到的，http://sunnahspace.com页面上的临时双线是我试图使它们对齐的内容。我可以发布你需要的所有代码，但因为它太多了，我不想让每个人都陷入大量阅读的困境，我会发布 css，如果你要求一些具体的东西，我会发布它，否则可以查看来自上面链接的索引页面的来源。请对我放轻松，在开发方面我有点像个白痴，而且我相信你们以前都是菜鸟。提前致谢。

这是 3 个 div 的 css:

#middle_container {
    float: right;
    width: 60%;
    padding: 5px;
    margin:auto;
}

#right_container {
    float: right;
    width: 20%;
    padding: 5px;
    margin: auto;
}

#left_container {
    float: right;
    width: auto;
    min-width: 200px;
    padding: 5px;
    margin: auto;
}

Answer 1

首先，您需要取下第一个 column_middle_temp1 上方的第一个垫片。

其次，您需要从 top_container 中移除 margin-bottom: 20px。

最后你需要在底部添加:

<div id="left_container">...</div><br clear="all" />

这是我马上看到的，如果这仍然不起作用，请告诉我。