Question

我正在尝试将三个div并排工作，但是当我在每个div之间添加一个边框和一个小间隙时，第三个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);
    }
}

Answer 2

您可以使用float或flex模式，但请确保设置border-box。当您使用margin以及这样的固定布局时，请确保宽度正确：

* {
  box-sizing: border-box;
}
.trendingContainer {
  margin: 0 auto;
  overflow: hidden;
}

.trendingBox {
  border: 1px solid #e5e5e5;
  background: #fff;
  float: left;
  width: 30%;
  margin: 0 0.5%
}

<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>

预览

Answer 3

再试一次，这次完全不同，添加了一个子DIV来指定带边距和边框的内容：

（这保留了原始大小和其他引导程序的东西，只在单独的div上定义了额外的样式，使用起来更干净）

HTML：

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

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

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

CSS：

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    /* Add other style here */
}
.trendingBox-content{
    border: 1px solid #e5e5e5;
    margin: 0 2px 0 0;
    background: #fff;
}

Answer 4

.trendingBox { 
    border: 1px solid #e5e5e5;  
    background: #fff; 
    margin: 0 2px 0 0; 
    display: inline-block;
    float: left;
    width: calc(33.3% - 4px);
}

calc是css3中的新内容我相信。
4px是2px（边距）+ 2 * 1px（边框）
您可以尝试的另一件事是使用大纲。我相信它的宽度会被认为是盒子元素的一个端口，虽然没有尝试过。

我相信一切都很清楚

Answer 5

你可以试试这个。

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    display: inline-block;
    position: relative;
    float: left;
    background: #fff;
    margin: 0 2px 0 0;
}

<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 Big</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>

Answer 6

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    box-sizing: border-box;
}

box-sizing: border-box;可以解决问题。这样可以确保在向其添加填充时div不会调整大小。

编辑：请参阅我的其他答案，我认为这是正确的做法。

如何将3个div与边缘和边框并排放置？

6 个答案: