Question

我有这个结构用于创建2个cols和内部内容：

        <style>
    #articulos_content
        {
        position:relative;
        width:100%;
        min-height:400px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:30px;
        overflow:hidden;
        }

        #articulos_load_col_left
        {
        float:left;
        position:relative;  
        width:72%;
        mini-height:400px;
        height:auto;
        margin-bottom:-50000px;
        padding-bottom:50000px;
        }

        #articulos_load_col_right
        {
        float:right;
        position:relative;  
        width:28%;
        mini-height:400px;
        height:auto;
        background-color:#cccccc;
        margin-bottom:-50000px;
        padding-bottom:50000px;
        }
</style>

<div id="articulos_content">
<div id="articulos_load_col_left">Load the articles in bucle</div>
<div id="articulos_load_col_right"></div>
</div>

你如何看到名为articulos_content的样式有2个div作为cols，而在col左边我在php中加载bucle用于显示文章

我有一个名为articulos_content的样式中隐藏溢出的问题，因为文章有弹出的show article的注释，并且溢出隐藏切断了这个css窗口并且没有让我看到所有，但溢出：隐藏它增长cols是必要的，在这一点上我不知道我能做些什么来解决这个问题

Thank's

Answer 1

使用clearfix作为额外的类。无论你在哪里使用溢出，删除溢出addclass clearfix到该div它将工作。

.clearfix:after {
 content: " "; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}

Answer 2

正如@Venu immadi所提到的，在您的容器中添加“clearfix”作为类，并在您的CSS中添加样式。

见下文：

<style>
    #articulos_content
    {
        position:relative;
        width:100%;
        min-height:400px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:30px;
        overflow:hidden;
    }

    #articulos_load_col_left
    {
        float:left;
        position:relative;  
        width:72%;
        mini-height:400px;
        height:auto;
        margin-bottom:-50000px;
        padding-bottom:50000px;
    }

    #articulos_load_col_right
    {
        float:right;
        position:relative;  
        width:28%;
        mini-height:400px;
        height:auto;
        background-color:#cccccc;
        margin-bottom:-50000px;
        padding-bottom:50000px;
    }

    .clearfix:after 
    {
         content: " "; /* Older browser do not support empty content */
         visibility: hidden;
         display: block;
         height: 0;
         clear: both;
    }

</style>

<div id="articulos_content" class="clearfix">
    <div id="articulos_load_col_left">Load the articles in bucle</div>
    <div id="articulos_load_col_right"></div>
</div>

Css溢出隐藏在外面

2 个答案: