尝试获取相等的高度列，但div后的列不工作 [英] trying to get equal height columns but div after the columns does not work

问题描述

示例第页我正在处理

我使用了此页面上提及的技术：

基本上我有一个容器，在容器内有 col1 和 col2 。我想要 col1 和 col2 为同一高度。

Basically I have a container and inside the container I have col1 and col2. I want col1 and col2 to be same height.

这一切都可以很快改变：

this all works fine soon as I change:

<div id="container1">
    <div id="col1"> column1</div>
    <div id="col3"> Column3</div>
</div>

到

<div id="container1">
    <div id="col1"> <div class="announcement-heading"/>column1</div></div>
    <div id="col3"> <div class="announcement-heading">Column 3</div></div>
</div>

当我这样做，它开始在我的页脚重叠。

When I do this, it starts to overlap on my footer. What can I do to fix this??

推荐答案

您可以在container1中添加一个清除div以确保完全封装col1和col2 ，那么如果你的页脚是一个简单的div，你可以添加一个边距或填充到容器1，以确保页脚是清楚的。这里是您将使用的代码：

You can add a clearing div inside container1 to ensure it fully encapsulates col1 and col2, then if your footer is a simple div you can add a margin or padding to container 1 to ensure your footer is clear. Here's the code you'd use:

<div id="container1" style="padding-bottom:20px;">
    <div id="col1"> <div class="announcement-heading"/>column1</div></div>
    <div id="col3"> <div class="announcement-heading">Column 3</div></div>
    <div style="clear:both;"></div>
</div>

底部填充是可选的，取决于您为页脚使用的技术，正在使用Sticky Footer（cssstickyfooter.com）。

The bottom padding is optional and depends on what technique you are using for your footer, such as if you are using a Sticky Footer (cssstickyfooter.com).

这篇关于尝试获取相等的高度列，但div后的列不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！