媒體查詢 - 改變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動態內容寬度改變

回答

相關問題