Question

我正在努力以正确的方式清除3 div我可以通过在包裹div的底部添加填充来实现它，但这实际上是不切实际的。

您认为最好的治疗方法是什么？

HTML

<section class="audience">

<div class="container">

    <div class="audience_col1">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

    <div class="audience_col2">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

    <div class="audience_col3">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

</div>    

</section>

CSS

.audience{
    width: 100%;
    background-color: #f6f5fa;
    height: auto;
    overflow:auto;
    text-align:center;
    padding: 20px 0 20px 0;
}

.audience_col1{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;
}

.audience_col2{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;  
}

.audience_col3{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;  
}

Answer 1

如果我正在考虑您要完成的工作，为什么不在内联显示div元素？

Demo Fiddle

CSS

.audience {
    width: 100%;
    background-color: #f6f5fa;
    text-align:center;
    padding: 20px 0 20px 0;
    font-size:0; /* <--- trick to prevent inline 'spacing' of multiline HTML */
}
.audience_col1, .audience_col2, .audience_col3 {
    width: 33.33%;
    height: 100px;
    display:inline-block;
    box-sizing:border-box;
    padding: 20px;
    font-size:14px; /* <--- revert font-size */
}

Answer 2

.audience{
display:block;
}

.audience_col1,
.audience_col2,
.audience_col3{
    display:inline-block;
}

Answer 3

如果您想使用float概念，这是您应该使用的CSS，否则您可以更改代码并继续使用display: inline-block概念，如另一个答案所示： -

<强> Demo Fiddle

.audience{
    background-color: #f6f5fa;
}
.container {
    overflow: hidden;
    text-align: center;
}

.audience_col1, .audience_col2, .audience_col3 {
    width: 33.33%;
    float: left;
    box-sizing:border-box;
    padding: 20px;
}

清除div不起作用

3 个答案:

Demo Fiddle