Question

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

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

我正在使用以下代码使用javascript修复此问题，但它感觉很大（当用户调整浏览器大小时它不起作用）：

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就能达到同样的效果。 max-height上的caption为100％，min-width为36％，宽度会随着标题高度的变化而相应变化。

Answer 1

如果没有标记，很难看出CSS是否可行。对于JavaScript，您希望将resize函数附加到window.onresize事件，这将在调整窗口大小时调用。

See example on JSFiddle

window.onresize = updateDimensions;

function updateDimensions(e) {
    document.getElementById('width').innerHTML = window.innerWidth;
    document.getElementById('height').innerHTML = window.innerHeight;
}

updateDimensions();

CSS：如果p叠加的高度，则增加父宽度

1 个答案: