2017-05-26 149 views
-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边界。你应该看到: enter image description here

+0

分享一把小提琴。 –

+0

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

+0

对不起。删除我的评论 –

回答

1

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

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

,你可以在这里看到:Fiddle

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

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

你可以在这里看到:Fiddle

+0

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

+0

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