CSS列在屏幕上無法按預期工作調整大小

Question

我有一個div，它顯示一些帶有文本旁邊的圖標。我遇到的問題是，當窗戶縮小時，圖像和文字變得混亂。下面是它看起來像在全屏：

這裏是什麼樣子時，窗口大小隻是一個稍微小一點，如：

這裏是我的CSS：

.grid-wrap { 
    margin-left: -3em; 
    /* the same as your gutter */ 
    overflow: auto; 
    height: auto; 
} 
.grid-col { 
    float: left; 
    padding-left: 3em; 
    padding-bottom: 5px; 
/* this is your gutter between columns */ 
    width: 100%; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.newspaper-col{ 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 20px; /* Firefox */ 
    column-gap: 20px; 
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ 
    -moz-column-rule-style: solid; /* Firefox */ 
    column-rule-style: solid; 
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ 
    -moz-column-rule-width: 1px; /* Firefox */ 
    column-rule-width: 1px; 
} 
.one-quarter { 
    width: 25%; 
} 
.one-half{ 
    width:50%; 
} 

.one-third{ 
    width: 33%; 
} 
.one-whole{ 
    width: 100%; 
} 

這裏是我的HTML：

         <div style="padding-left:10px; padding-top:10px"> 
             <ul class="grid-wrap one-whole plain"> 
              <li ng-repeat="item in items" class="grid-col one-quarter"> 
               <span style="display:inline-block; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak> 
                <p><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></p> 
               </span> 
              </li> 
             </ul> 
            </div> 

我試圖用這裏找到StackOverflow的代碼，我得到如下：

對於CSS的是：

.dashboard-section > span:nth-of-type(4n+1){ 
clear:both; 

}

和HTML是：

<div style="padding-left:10px; padding-top:10px" class="dashboard-section"> 
              <span ng-repeat="item in items"> 
               <span style="display:inline-block; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak> 
                <span><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></span> 
               </span> 
               <br ng-if="!(($index + 1) % 4)"> 
              </span> 
             </div> 

我能水療通過下面添加一個寬度父跨度CE出上面的代碼，但它並沒有解決問題，調整大小：

<span style="display:inline-block; width:20%; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak> 
                <span><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></span> 
               </span> 

我在黔驢技窮就在這裏。任何援助非常感謝！

Answer 1

我是有問題是文本上的每個圖像/文本對不同包裹的圖像旁邊。一些包裹到2,3甚至4行。這樣可以防止以下行一直纏繞到div的左側（請參見下面的照片）。

通過每個跨度設置爲相同的高度，每個後續行能夠開始一路根據需要向左。

               <span style="display:inline-block;width:200px; height:100px; vertical-align:top; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak> 
                   <span><img style="float:left; margin-right:5px;margin-bottom:25px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder; vertical-align:middle" ng-bind="item.ModuleHeaderText"></span><br /><p ng-bind="item.ModuleCalculatedStateText"><br /></p></span> 
                  </span> 

希望這可以幫助別人。快樂的編碼！

Answer 2

很容易使用自舉：

<div class="row"> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
</div> 

<div class="row"> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-3">.col-md-3</div> 
</div>