多个 <div> 显示在一行中，使用最大 space 可用

Question

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

这是我现在拥有的 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

您需要给子元素一个百分比宽度，而不是一个固定的（min/max-）宽度。

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

但是，有了边距，您将需要使用 calc 来获得剩余 space 的 ~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>

Answer 2

.banner {

width: 33%  

}

可能要考虑删除 min-width max-width 代码，这样它就不会在小于和大于 min/max 尺寸的设备上中断。

多个 <div> 显示在一行中，使用最大 space 可用

Multiple <div> display in one line, using maximum space available

html

css

width