我怎样才能把3个div并排放置边距和边框？

我试图把三个div并排工作正常，但是当我添加一个边框和每个div之间的小差距第三个div进入一个新行。有没有一种方法可以自动调整div的大小以适应它？我怎样才能把3个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; 
}

来源

2017-07-29 Exoon

您可以随时使用计算和基于百分比宽度：

.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); 
    } 
}

来源

2017-07-29 19:29:24

哪个不会在IE <11中工作。还有其他解决方案，然后'calc'。 –

这对我很有帮助，不到1％的用户正在使用 Exoon

@JellePosthuma这只是一个解决方案，如果他想支持IE <11，那么他会使用其他的东西，但这些浏览器只主要用于工作场所。 –

-2

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

的box-sizing: border-box;的伎俩。这可以确保div在添加填充时不会调整大小。

编辑：看到我的其他答案，这是在我看来这是正确的方式。

来源

2017-07-29 19:27:57

都能跟得上它没有。 'margin'不受影响。 –

哦，我读了填充。我的错。在这种情况下，我会离开div，因为它们是，并将其中的子div，它可以有任何样式，而不会移动父div。 –

是的，这是正确的方法。 –

您可以使用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>

预览

来源

2017-07-29 19:28:24

如果当它达到小浏览器大小，我希望它显示2，然后当它到达浏览器大小XS我只想要1显示，请问这种方法仍然工作？ – Exoon

@Exoon您可以使用'@ media'查询队友！ –

-3

试试这个：

<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> 
<style type="text/css"> 
    .trendingContainer { 
    margin: 0 auto; 
    padding: 0 2px 0 0; 
} 
.trendingBox { 
    border: 1px solid #e5e5e5; 
    background: #fff; 

} 
</style>

来源

2017-07-29 19:28:31

这不起作用，这不会在元素之间留下空间 –

但是，这对我来说很好：D –

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

（这会保留原始大小和其他引导程序的内容，仅在单独的div上定义附加样式，w更富清洁使用）

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

来源

2017-07-29 19:35:34

当我使用这种方法时，所有框之间的差距更大，你知道为什么吗？ – Exoon

-1

.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（margin）+ 2 * 1px（border）
您可以尝试的另一件事是使用大纲。我相信它的宽度将被认为是盒子元素的端口，但还没有尝试过。

我相信，其余全部是明确

来源

2017-07-29 19:36:36

你可以试试这个。

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

来源

2017-07-29 19:39:54

这对于任何方框都没有固定宽度。我刚刚编辑了你的答案，以说明为什么它不起作用。只需检查中间的盒子......'：）'你需要给出百分比的宽度以获得正确的... –

哦，是的。刚刚检查。感谢您的注意。我错过了这一点。谢谢。 :)但我刚刚写了一个通用的方式来说明如何做。增加框的宽度和数量是我保持变化的东西。但我会记住这一点，谢谢 –

我怎样才能把3个div并排放置边距和边框？

回答

相关问题