html - 多个 在一行中显示，使用最大可用空间

Question

我有三个<div>具有父元素的元素 <div> .家长<div>占据整个屏幕，但具有设定的高度。我需要所有三个<div>其中的元素具有完全相同的宽度，但同时在没有换行的情况下占用尽可能多的空间，但没有运气。它是否可以某种方式实现，也许使用其他方法？

这是我现在拥有的 HTML 代码:

.banner_container {
  width: 100%;
  min-width: 510px;
  max-width: 1230px;
  height: 150px;
  overflow: hidden;
}
.banner {
  float: left;
  min-width: 160px;
  max-width: 400px;
  height: 150px;
  background-color: grey;
  margin: 0px;
}
.banner:nth-child(2n) {
  margin-left: 15px;
  margin-right: 15px;
}

<div class="banner_container">
  <div class="banner">Banner 1</div>
  <div class="banner">Banner 2</div>
  <div class="banner">Banner 3</div>
</div>

Answer 1

您需要给子元素一个百分比宽度，而不是一个固定的(最小/最大)宽度。

如果没有边距，它只是一个简单的 ~33% 宽度。

但是，有了边距，您将需要使用 calc获得约 33% 的剩余空间。

你需要的计算是:(100% - 2 * 15px)/3 = (100% - 30px)/3 = 33.333% - 10px。

.banner_container{
    height:150px;
    width:100%;
    min-width:510px;
    max-width:1230px;
}
.banner{
    background-color:grey;
    float:left;
    height:100%;
    width:calc(33.333% - 10px);
}
.banner_container>:nth-child(2){
    margin:0 15px;
}

<div class="banner_container">
    <div class="banner">Banner 1</div>
    <div class="banner">Banner 2</div>
    <div class="banner">Banner 3</div>
</div>