媒体查询 - 改变CSS动态内容宽度改变

-1

我使用语义UI和具有网格建立一个标签段内，如下所示：媒体查询 - 改变CSS动态内容宽度改变

<div class="ui bottom attached tab segment" data-tab="Overall Stats"> 

<div class="ui internally celled stackable grid"> 
    <div class="row"> 
    <div class="eight wide column"> 
     <h4 class="ui blue header">Top Goal Scorers 
     <div class="sub header">(All Age Groups)</div> 
     </h4> 
     <div id="showOverallGB"></div> 
    </div> 


    <div class="eight wide column"> 
     <h4 class="ui blue header">Most MoM Awards 
     <div class="sub header">(All Age Groups)</div> 
     </h4> 
     <div id="showOverallMoM"></div> 
    </div> 

    </div> 
</div>

在showOverall*的div我添加动态创建的表。我遇到的问题是，创建的表格可能比它们所在的列宽，这意味着左手表与右手表重叠（在非移动设备上查看时，网格不会堆叠）。如果动态添加的表格比它们所在的列更宽，是否有办法调用网格的stackable部分？

编辑：这里有一个小提琴 - https://jsfiddle.net/eynnqLkk/1/ 你需要去Age Group Stats选项卡，然后玩的的jsfiddle边界。你应该看到：

来源

2017-05-26 SimpleOne

分享一把小提琴。 –

@ Geoman-Yabes-你确定吗？我检查了它，没有看到任何缺失的标签。另外，表格应该在大屏幕上水平对齐。但问题是：在某些屏幕尺寸上，表格重叠，因为屏幕不够宽，但屏幕足够宽以防止媒体查询使网格可堆叠。 – SimpleOne

对不起。删除我的评论 –

你可以添加滚动条到你的表，以便它们不会重叠添加：

#showGB, #showMoM {width:100%; overflow:auto;}

，你可以在这里看到：Fiddle

或者，如果如果没有空间可用，请将其移动一个放在另一个的后面：

.ui.grid > .row > [class*="eight wide"].column {width:auto !Important}

你可以在这里看到：Fiddle

来源

2017-05-26 11:55:57

谢谢。我更喜欢第二种解决方案。你能再解释一下它在做什么吗？我认为它只是将宽度设置为自动，对不对？但后来我不明白为什么CSS默认没有。 – SimpleOne

默认情况下，Css宽度在任何块元素上均为100％。问题是你的'语义'问题。有没有增加固定宽度。在这种情况下是50％。 –

媒体查询 - 改变CSS动态内容宽度改变

回答

相关问题