Question

所以我创建了这些带有信息的自定义图块，如下图所示。在瓷砖中显示的文本有很多变化，但总体尺寸等都是相同的。问题在于，当我的浏览器窗口大小缩小时，这些图块会在文本消失或被抛出位置时变得古怪。我想要尝试和发生的是，随着屏幕变小，而不是连续显示4，它在768px断点处显示2，然后在最小480px处显示1。图像显示了现在的情况。

全尺寸：

然后随着它缩小，你可以看到它是如何搞砸的：

我正在使用Bootstrap来帮助，但有了这些，我需要超越。正如我所说，有许多变体，这些是使用Angular中的模板引擎创建的。下面几个html代码，模板调用和模板本身。然后显示CSS。

那么我该怎么做呢？

模板卡：

<div class="beneTile" ng-if="benefit.planTypeId==2">
  <span ng-show="benefit.isPending"><card template2 ng-model="benefit"></card></span>
  <span ng-show="!benefit.isPending">
    <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}">
      <card template2 ng-model="benefit"></card>
  </a></span>
</div>
<div class="beneTile" ng-if="benefit.planTypeId==3">
  <span ng-show="benefit.isPending"><card template3 ng-model="benefit"></card></span>
  <span ng-show="!benefit.isPending">
    <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}">
      <card template3 ng-model="benefit"></card>
    </a>
    </span>
</div>

模板：

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
    <div class="beneHead T4">
        <p>{{ item.name }}</p>
        <div>
            <span>{{ item.beginDate|date : 'MM/dd/yyyy' }} - </span><span>{{ item.endDate|date : 'MM/dd/yyyy' }}</span>
        </div>
    </div>
    <div class="beneDetails">
        <div>
            <span class="col-md-6 beneImg"><img src="ppt/assets/beneTiles/HRA.svg"></span>
        </div>
        <div class="beneText">
            <p class="beneDesc">Current Balance</p>
            <p class="beneMoney">{{ item.balance | currency }}</p>
            <p class="beneDesc">Annual Benefit</p>
            <p class="beneMoney">{{ item.annualAmt | currency }}</p>
        </div>
        <div class="beneFooter">
            <p><span class="footerStatic">Last day to incur expenses:</span> <span class="footerDynamic">{{ item.lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
            <p><span class="footerStatic">Last day to submit claims:</span> <span class="footerDynamic">{{ item.lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
        </div>
    </div>
</script>

<!-- template3.html -->
<script type="text/ng-template" id="template3.html">
    <div class="beneHead">
        <p>{{ item.name }}</p>
        <div>
            <span>{{ item.beginDate|date : 'MM/dd/yyyy' }} - </span><span>{{ item.endDate|date : 'MM/dd/yyyy' }}</span>
        </div>
    </div>
    <div class="beneDetails">
        <div>
            <span class="col-md-6 beneImg"><img src="ppt/assets/beneTiles/Parking.svg"></span>
        </div>
        <div class="beneText">
            <p class="beneDesc">Current Balance</p>
            <p class="beneMoney">{{ item.balance | currency }}</p>
            <p class="beneDesc">Annual Election</p>
            <p class="beneMoney">{{ item.annualAmt | currency }}</p>
        </div>
        <div class="beneFooter">
            <p><span class="footerStatic">Last day to incur expenses:</span> <span span class="footerDynamic">{{ item.lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
            <p><span class="footerStatic">Last day to submit claims:</span> <span span class="footerDynamic">{{ item.lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
        </div>
    </div>
</script>

现在全部是CSS：

.beneTile {
    height: 245px;
    width: 245;
    border: 1px solid #999999;
}

@media only screen and (max-width: 767px) {
    .beneTile {
        height: 245px;
        width: 245px;
    }
}

@media only screen and (max-width: 500px) {
    .beneTile {
        height: 245px;
        width: 100%;
    }
}

.beneTile:hover {
    cursor: pointer;
}

.beneHead {
    background-color: #8a8c8e;
    height: 90px;
    text-align: center;
    padding-top: 20px;
}

.beneHead > p {
    line-height: 20px;
    color: #ffffff;
    font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
}

.beneHead > div > span {
    font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    line-height: 20px;
    color: #ffffff;
}

.T1 {
    background-color: #8a8c8e;
}

.T1:hover {
    background-color: #5a5b5d;
}

.T2 {
    background-color: #ab2328;
}

.T2:hover {
    background-color: #68070b;
}

.T3 {
    background-color: #2dccd3;
}

.T3:hover {
    background-color: #24a4a9;
}

.T4 {
    background-color: #ffb500;
}

.T4:hover {
    background-color: #fc9a26;
}

.beneHead > p {
    margin: 0px;
    font-size: 17px;
}

.beneHead span {
    font-size: 14px;
}

.beneDetails {
    color: #000000;
    height: 155px;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.beneDetails > div> span > img {
    height: 110px;
    width: 120px;
}

.beneText {
    margin: 0;
}

.beneDesc {
    font-size: 12px;
    text-align: right;
    margin: 0;
    line-height: 18px;
}

.beneMoney {
    font-size: 17px;
    color: #ab2328;
    text-align: right;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 0;
}

.beneFooter > p, .beneFooter > span {
    font-size: 12px;
    clear: both;
    line-height: 18px;
}

.beneFooter.footerStatic span {
    text-align: left;
}

.beneFooter span.footerDynamic  {
    text-align: right;
    float: right;
}

.beneFooter p span {
    font-size: 11px;
    line-height: 11px;
    margin: 0px;
}

我意识到了一篇很长的帖子，希望我提供足够的知识来了解我所拥有的以及我想去的地方。在此先感谢您的帮助！

Answer 1

您已修复height：

@media only screen and (max-width: 767px) {
    .beneTile {
        height: 245px;
        width: 245px;
    }
}

@media only screen and (max-width: 500px) {
    .beneTile {
        height: 245px;
        width: 100%;
    }
}

尝试使用height: auto;代替，它应该是好的。

自定义瓷砖根据尺寸响应

1 个答案: