html - CSS。 div 的内容在 div 之外

Question

出于某种原因，我的 div 中的内容在它们之外。我在容器中尝试了 overflow:hidden 和 overflow:auto，例如 height:auto，但似乎没有任何效果。

Fiddle here

html

<div id="portalPage">
    <div class="containerOfSites">
        <div class="portalItem col-md-4">
            <h1>AUTOMOTIVE</h1>
            <p>web sites for the<span> automotive</span> market</p>
            <a href=""><span class="viewMorePs">GO</span></a>
        </div>
        <div class="portalItem col-md-4">
            <h1>DESIGN</h1>
            <p>web sites for the small & large business for<span> all s ectors</span></p>
            <a href=""><span class="viewMorePs">GO</span></a>
        </div>
        <div class="portalItem col-md-4">
            <h1>BRANDING</h1>
            <p><span>branding</span> and design</p>
            <a href=""><span class="viewMorePs">GO</span></a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

CSS

#portalPage{
    background:url('http://i59.tinypic.com/2m780o6.jpg');
    text-align:center;
    padding:30px 50px;
}
.containerOfSites{
    display:inline;
    overflow:auto;
    height:auto;
}
.portalItem{
    background-color: rgba(255, 255, 255, 0.8);
    border:1px solid blue;
}
.portalItem span.viewMorePs{
    margin-bottom:10px;
}
.portalItem h1{
    color:#B5D803;
    font-weight:900;
    text-transform: uppercase;  
     font-family: 'Open Sans', sans-serif;
}
span.viewMorePs {
    background-color: #B5D803 !important;
    border: 2px solid #FFF !important;
    color: #FFF;
    font-weight: 600;
    font-size:12px;
    padding: 5px 14px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #383838;
    line-height: 1.4;
}

有没有人知道我可以做些什么来修复它？

干杯

Answer 1

您的按钮没有“下推”您的字段的原因是因为它是内联元素并且受其高度限制为行高。内联(跨度)元素的底部边距不应根据规范产生任何影响，除非它被设置为 block 。

span.viewMorePs {
    display:block;
}

所以解决办法就是设置span或者a来block http://jsfiddle.net/jn4144b9/15/你必须处理宽度，但这是另一个问题。