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>

我能够通过向父跨度添加宽度来填充上面的代码，如下所示，但它无法解决调整大小问题：

<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

使用bootstrap非常简单：

<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>

Answer 2

我遇到的问题是图像旁边的文字在每个图像/文本对上包装不同。有些包裹在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>

希望这有助于其他人。快乐的编码！

CSS列在屏幕调整大小时无法按预期工作

2 个答案: