Question

我有一个包含几个div的页脚div。其中一个是比其他图像更高的图像以及页脚容器。我试图让图像完全显示，但它被父div（页脚）切断。

尝试使用2个标准执行此操作：

页脚高度保持原样，而不是展开以容纳图像。
页脚内部的元素对齐在底部。

这是我到目前为止所做的......以及JSFiddle

HTML

<div class="wrapper">
    <div style="height: 100px; width: 80%; background: white;">BODY</div>
    <div class="footer">
        <div class="block-foot-social"> 
            <img src="http://placehold.it/10x10" />
            <img src="http://placehold.it/10x10" />
            <img src="http://placehold.it/10x10" />
            <img src="http://placehold.it/10x10" />
            <img src="http://placehold.it/10x10" />
        </div>
        <div class="block-foot-contact">
           <span>1-888-555-5555</span> | <span>Sales@Example.com</span>
        </div>
        <div class="block-foot-icon"> 
            <a href="#">
                <img src="http://placehold.it/80x80" />
            </a>
        </div>
    </div>
</div>

CSS

.wrapper {
    height: 300px;
    background: blue;
}
.footer {
    clear: both;
    height: auto;
    width: 100%;
    overflow: auto;
    background: green;
    position: relative;
}
.block-foot-contact, .blook-foot-icon, .block-foot-social {
    float: left;
    margin: 6px;
    overflow: auto;
}

.block-foot-icon {
    position: absolute;
    background: red;
    overflow: visible;
    bottom: 0;
    right: 0;
    width: 150px;
}

我尝试从overflow: auto中移除.footer，但它会折叠页脚div并将水平对齐排除在外。

你将如何做到这一点？提前谢谢。

Answer 1

如果我了解您，您希望图像完整显示，但页脚不会展开以适合图像的高度。还有一切都要与底线保持一致。

来这里看看我的解决方案：

CSS

.footer {
    position: relative;
    background-color: green;
}

.block-foot-social,
.block-foot-contact,
.block-foot-icon {
    display: inline-block;
    vertical-align: bottom;
    width: 33.33333%;
}

.block-foot-icon img {
    position: absolute;
    bottom: 0;
}

使用此解决方案，您需要稍微更改标记，以便<DIV>之间没有任何空格，即

<div class="block-foot-social"> 
    <img src="http://placehold.it/10x10" />
    ...
</div><!-- no whitespace here --><div class="block-foot-contact">
    <span>1-888-555-5555</span> | <span>Sales@Example.com</span>
</div><!-- no whitespace here --><div class="block-foot-icon">
    <a href="#">
        <img src="http://placehold.it/80x80" />
    </a>
</div>

您还需要对我发布的CSS进行调整，并根据需要为块提供不同的宽度和边距。

当子元素大于父元素时，使子元素完全可见

1 个答案: