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> 

나는 spa 다음과 같이 부모 범위에 폭을 추가하여 위의 코드를 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>