我有这种灵活的布局和一些JS https://jsfiddle.net/7k8t3xgc/3/

<div class="window">

    <div class="left">
         <div class="optional">optional content</div>
    </div>

    <div class="right">
        <div class="wordpool"></div>
        <div class="category"></div>
    </div>

</div>


.wordpool元素填充有一些单词,需要通过单击将其移至.category元素。

现在发生的是,单击单词时.window元素的宽度正在缩小。有没有办法防止这种行为?我能想到的唯一方法是计算渲染时的字池宽度,并将其设置为样式属性,但是它在响应性方面存在缺点。

我无法删除flex功能,因为左(可选)面板和右面板都需要相同的宽度和居中位置。

我不能使用静态宽度,因为它需要响应。

由于内容短而在宽屏上看起来很愚蠢,所以不能像.window { width: 90%; }这样。

左右内容在我的应用程序页面之间都发生了变化(例如测验或Google表单-可以是文本,可以是图像,复选框,单选按钮等),但是HTML模板是相同的。

最佳答案

您希望它是动态的,根据加载时的实际文本宽度,将此行添加到脚本中

$(".window").css('min-width', $(".window").width() + 'px');


Updated fiddle



您可以这样做,而不是监视较小屏幕的resize事件。

注意,width: 100%需要使用脚本设置,如果在CSS中设置,计算将是错误的

$(".window").css({'max-width':$(".window").width() + 'px','width':'100%'});


Updated fiddle 2

10-05 20:55
查看更多