Question

所以，目前我正在尝试根据图片的高度而不是文本的高度来设置某些css表内容的最小高度。

从本质上讲，我的布局是这样的：

<Image @60% width> | <Text @40% width>

我目前正在使用弹性盒来做到这一点。

然而，现在，当页面调整大小时（我不能使用静态高度，因为它需要完全响应），在某个点上，图像变得非常小，文本使容器变得庞大。

理想情况下，我希望文本始终与图像的高度相同，如果有溢出，则基于滚动。

这是我现在的Jsfiddle。

http://jsfiddle.net/D7h3z/4/

我不反对使用新的/实验性的技术。我反对使用JavaScript，因为没有必要。如果我确实需要，我不使用JQuery，所以如果可以，请在答案中避免使用它。

Answer 1

3检查我对你的小提琴做出的改变 - New Fiddle

基本上，我将描述的内部跨度绝对定位，然后在其容器跨度上放置了溢出自动。我向img容器应用了200px的最小高度，它看起来像你描述的那样工作。如果情况不是这样，请告诉我。

.description {
    width: 40%;
    padding: 10px;
    position: relative;
    overflow-y:scroll;
}

.imagebox {
    width: 60%;
    min-width: 300px;
}

.imagebox img {
    width: 100%;
    min-height:200px
}

.description span {
    padding: 10px;
    position: absolute;
}

编辑实际上100％无法正常工作，图片无法保持宽高比...... 悲伤的长号

编辑2 以最小宽度添加，然后从动态角度来看，这远非理想。我今晚稍后再说一遍。

CSS min-height基于图像

1 个答案: