html - 如何将 3 个 div 并排放置，并带有边距和边框？

Question

我试图将三个 div 并排放置，效果很好，但是当我在每个 div 之间添加一个边框和一个小间隙时，第 3 个 div 会换行。有没有办法自动调整 div 的大小以适合它们？

HTML:

  <div class="trendingContainer">
      <div class="col-lg-4 trendingBox">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
        <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
      <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
</div>

CSS:

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
}

Answer 1

您始终可以使用基于计算和百分比的宽度:

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    width: calc(100% / 3 - 4px);
}

如果你想分别支持多种浏览器宽度，你可以使用媒体查询:

@media(max-width: 600px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 2 - 4px);
    }
}

@media(min-width: 601px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 3 - 4px);
    }
}