Question

这是一个图像预览和文本。我有两个div：一个带图像，一个带文字。图像需要是方形尺寸并填充整个容器

目前的代码是

<div class="row">
<div class="col-md-3">
    <div class="col-md-6">
        <img src="http://quarknet.de/fotos/blumen/wildblumen/graeser-im-quadrat.jpg" alt="" style="max-height:100%;max-width:100%">
    </div>
    <div class="col-md-6">
        <div class="top">Top</div>
        <div class="bottom">bottom</div>
    </div>
</div>

http://jsfiddle.net/m1sbhnwe/

它适用于全屏，因此您需要将预览拉得更宽才能看到效果。

现在我需要顶级类的div始终保持在div的顶部，而底层类的div始终保持在图像级别的父div的底部。这意味着底部div应该与图片的下边缘对齐。

如果我将position:absolute;bottom:0添加到该div，它就会转到顶部。我怎样才能达到我想要的效果？

Answer 1

我不清楚你想要的效果。

如果文本出现在顶部，则通常指向高度为0px的父div;

如果你漂浮.col-md-6那么这可能会导致计算高度的问题。在这种情况下，您可能希望在最后一个.col-md-6

之后添加一个

如果您使用的是绝对定位的.col-md-6，则无法计算尺寸，您必须提出固定的宽度/高度;

如果.row是全屏的话，这是一种解决方案......

.row {
    position:fixed; top:0px; left:0px; right:0px; bottom:0px;
}
.col-md-6 {
    position:absolute; top:0px; left:0px; right:0px; bottom:0px;
    text-align:center;
}
.col-md-6 img {
    height:100%;
}
.col-md-6 .top {
    position:absolute; top:0px; left:0px; right:0px;
}
.col-md-6 .bottom {
    position:absolute; bottom:0px; left:0px; right:0px;
}

你提供的小提琴中没有css，如果你添加一些CSS来表明你遇到的问题会有所帮助。

更新评论;

.col-md-6 {
    float:left; height:100%; position:relative;
}
.col-md-6 img {
    height:100%;
}
.col-md-6 .top {
    position:absolute; top:0px; left:0px;
}
.col-md-6 .bottom {
    position:absolute; bottom:0px; left:0px;
}

将内容放在相对于图像的div底部

1 个答案: