响应部门

Question

我需要一个3或4列响应div系统。在这里阅读一些问题我发现this snippet：

HTML：

<div class="core">
 <div class="box">
  <div class="text">Text</div>
 </div>
 <div class="box">
  <div class="text">Text</div>
 </div>
 <div class="box">
  <div class="text">Text</div>
 </div>
</div>

CSS：

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 32.03125%; 
    float:none;
    display: table-cell;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

这基本上就是我需要的和我已经拥有的东西。问题是当with变得越来越小时，我希望它能像块一样使块下来。

而不是：

我想要这个：

Answer 1

试试这个CSS：

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 100%; 
    float:none;
    display: table-row;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

  

问题在于，当它变小时，我希望它能够获得块   向下

您找到的此链接未使用任何响应式框架。它只是简单的CSS + HTML