gpt4 book ai didi

javascript - 动态地使子容器在可变宽度父容器中获取可用宽度

转载 作者:行者123 更新时间:2023-11-28 14:01:34 26 4
gpt4 key购买 nike

我有一个包裹三个 float 容器的容器,包裹容器的宽度可变,最左边的内部容器的宽度为 100px,最右边的内部容器 code> 的宽度为 500px。 center container 没有设置宽度,但应尽可能多地占用剩余空间。

<style type="text/css">
#outerContainer div:nth-child(1) {float: left; width: 100px}
#outerContainer div:nth-child(2) {float: left}
#outerContainer div:nth-child(3) {float: right; width: 500px}
</style>

<div id="outerContainer">
<div>left most inner container</div>
<div>center container</div>
<div>right most inner container</div>
</div>

动态中心容器应用了一些样式,使其内容溢出:隐藏和省略号以供展示。

<style type="text/css">
#outerContainer div:nth-child(1) {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>

我不确定仅使用 css 动态缩放此内部元素宽度的解决方案是什么。这是我的有效 JavaScript 解决方案,但我想删除它,因为它看起来太多了。

NS.textWidth = function(sourceSel){
var sourceSel = sourceSel,
html_org = $(sourceSel).html(),
html_calc = '<span>' + html_org + '</span>';

//Wrap contents with a span.
$(sourceSel).html(html_calc).css({width:'100%'});
//Find width of contents within span.
var width = $(sourceSel).find('span:first').width();

//Replace with original contents.
$(sourceSel).html(html_org);

return width;
};

adjustContainerWidth();

$(window).bind('resize', function(e){
clearTimeout(c.resize_timeout);

c.resize_timeout = setTimeout(function() {
adjustContainerWidth();
}, 200);
});

function adjustContainerWidth() {
var winW = parseInt($(window).width());
var firstContainer = parseInt($('#outerContainer div:nth-child(1)').width());
var lastContainer = parseInt($('#outerContainer div:nth-child(3)').width());
var availW = winW - firstContainer - lastContainer;
var textW = NS.textWidth('#outerContainer div:nth-child(2)');

if (availW > 40 && availW < textW) {
$('#outerContainer div:nth-child(1)').css({ width : availW + 'px' });
} else {
$('#outerContainer div:nth-child(1)').css({ width : textW + 'px' });
}
}

最佳答案

关于javascript - 动态地使子容器在可变宽度父容器中获取可用宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10288401/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com