CSS:如果p的高度覆盖，则增加父级宽度

CSS: Increase parent width if height of p overlays

本文关键字：增加 覆盖 如果 高度 CSS      更新时间：2023-09-26

我有一个100%是窗口的图像。在里面，我有一个绝对定位的div（带有类caption），它显示一个标题和一些文本。此标题的min-width为36%。我的网站是否完全响应。

我正在使用媒体查询来重新定位平板电脑和手机上的标题。但是，有时item中的文本太大——标题的高度大于图像的高度。

我使用以下代码使用javascript修复了这个问题，但它感觉有一个很大的bug（当用户调整浏览器大小时，它不起作用）：

window.onload = function(){
  setWidth();
};
var count = 0;
function setWidth() {
    $('.item').each(function() {
        if ( $(this).find('.caption')[0].scrollHeight >  $(this).height() && count <= 100) {
            $(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
            count++;
            setWidth();
        }
    });
}

有没有一种方法可以让我只使用css就达到同样的效果。其中caption上的max-height为100%，min-width为36%，宽度将随着字幕高度的变化而相应变化。

很难看出CSS在没有标记的情况下是否可行。至于JavaScript，您希望将resize函数附加到window.onresize事件，每当调整窗口大小时都会调用此函数。

参见JSFiddle 上的示例

window.onresize = updateDimensions;
function updateDimensions(e) {
    document.getElementById('width').innerHTML = window.innerWidth;
    document.getElementById('height').innerHTML = window.innerHeight;
}
updateDimensions();
相关文章：