我有这种灵活的布局和一些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