Question

由于某些原因，我的div中的内容不在他们的内部。我在容器中尝试了overflow:hidden和overflow:auto，例如height:auto，但似乎没有任何效果。

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

你的按钮不是＆＃34;按下＆＃34;你的领域是因为它是内联元素，并受到它高度与行高的限制。内联（span）元素的margin-bottom不应该通过规范产生任何影响，除非它被设置为阻止。

span.viewMorePs {
    display:block;
}

因此，解决方案是设置范围或阻止http://jsfiddle.net/jn4144b9/15/您必须处理宽度，但这是另一个问题。

Answer 2

如果你不想使用overflow：hidden（看起来更糟糕），你可以在节点中添加这些属性：

.portalItem a.go{
    margin:15px;
    display:block;
}

，当然，添加这个类：

 <a class='go' href=""><span class="viewMorePs">GO</span></a>

这样，你的div就会有很好的身高

您可以在此处查看更改： http://jsfiddle.net/jn4144b9/13/

Answer 3

将overflow: hidden添加到.portalItem

Answer 4

将以下样式添加到span.viewmoreprefs

position: relative;
z-index: 100;
bottom: 8px;

JsFiddle

Answer 5

.portalItem{
    background-color: rgba(255, 255, 255, 0.8);
    border:1px solid blue;
    padding-bottom:15px; //give some padding here
}

Demo is here

CSS。 div的内容在div之外

HTML

CSS

5 个答案: