将自动创建的div水平安排为响应性

Question

我有以下代码：

<div class="bottom-container">
    <div class=bottom-data-cards-content *ngFor="let com of myBottomDataCards"
        (click)="showTagDetail([com.tagname, com.value, com.description, com.units, com.quality, com.timestamp])">
        <div id="textbox">
            <p class="tag-description">{{com.description}}</p>
            <p class="tag-value-units">{{com.value | number : '1.2-2'}} {{com.units}}</p>
        </div>
        <div style="clear: both;"></div>
        <div class=progress-bar-container>
            <div class=tag-lower-limit>{{com.lowlimit | number : '1.0-0'}}</div>
            <div class=progress-bar><meter class="asset-meter" min="{{com.lowlimit | number : '1.0-0'}}"
                    max="{{com.highlimit | number : '1.0-0'}}" low="{{(com.highlimit | number : '1.0-0') * 0.25}}"
                    high="{{(com.highlimit | number : '1.0-0') * 0.75}}"
                    optimum="{{(com.highlimit | number : '1.0-0') * 0.90}}" value="{{com.value}}"></meter>
            </div>
            <div class=tag-higher-limit>{{com.highlimit | number : '1.0-0'}}</div>
        </div>
        <br />
    </div>
</div>

外层的划分如下：

 .bottom-container{
    margin-top:40px;
  }

  .bottom-data-cards-content{
    margin-left:50px;
    flex:1;
    width: 350px;
    cursor: pointer;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
    border-radius:20px;
    padding:0px 10px 0px 10px;
    margin-bottom: 30px;
  }

这将创建5个div，它们垂直对齐，在每个区域之间都有一个空隙。我想把它们水平地排列在桌面上，但垂直地排列在较小的屏幕上。

我该怎么做？

Answer 1

请把这个加在样式上。

css

.bottom-container::before,
.bottom-container::after {
    content: "";
    display: table;
    clear: both;
}
.bottom-data-cards-content {
    width: 20%;
    float: left;
    padding: 0px 20px;
}
@media only screen and (max-width: 767px) {
    .bottom-data-cards-content {
        width: 100%;
    }
}