并排显示响应式 div 以适应整个空间并在它们之间留有边距的方法

Question

我正在努力寻找一个可靠的解决方案来并排显示任意数量的 div 以适应整个空间。尽管内容不同，它们还需要具有相同的高度和大小。 div 需要有一些余量才能彼此分开。 我不能使用 Flex，因为我正在处理的页面需要与 IE9 兼容。因此，我依赖 inline-block、float 和 table 方法。

你有什么建议吗？

这是我尝试过的 HTML 和完整示例的小提琴链接 --> https://jsfiddle.net/crvu1oc9/

<div class="cards-list">
   <div class="card">
      <div class="card__image-box">
        <img class="img-teaser" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="Card 1 image">
      </div>
      <div class="card__content-box">
        <div class="text-box">
          <h3>Choosing your elderly care at home</h3>
          <date>04 Nov, 2016</date>
        </div>
      </div>
  </div>

  <div class="card">
      <div class="card__image-box">
        <img class="img-teaser" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="Card 1 image">
      </div>
      <div class="card__content-box">
        <div class="text-box">
          <h3>Choosing your elderly care at home</h3>
          <date>04 Nov, 2016</date>
        </div>
      </div>
  </div>

  <div class="card">
      <div class="card__image-box">
        <img class="img-teaser" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="Card 1 image">
      </div>
      <div class="card__content-box">
        <div class="text-box">
          <h3>Choosing your elderly care at home</h3>
          <date>04 Nov, 2016</date>
        </div>
      </div>
  </div>

</div>

Answer 1

在 CSS 中，为您的每个卡片类别指定一个百分比，加起来为 100；由于子元素继承了父元素的宽度，因此所有 class="card" 的 div 的百分比将相加。

宽度 + 内边距 + 边框 + 边距 = 总大小

所以，在你的情况下：

.cards-list{
            width: 90%;
            max-width: 980px;


        .card{
            float: left; /* or right */
            width: 32%;
            margin-right: 1.333333%;

由于卡片类只有 3 个元素，这将填满整个卡片列表 div 元素。 32% 宽度 + 1.33% 右边距 = 33.33% / 卡片。

添加元素时，重新计算百分比。

这是您使用四个“卡片”的代码：https://jsfiddle.net/crvu1oc9/1/