Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要为子元素指定宽度百分比，而不是固定（最小/最大）宽度。

没有边距，每个边距只有33％的宽度。

但是，利用边距，您需要使用calc来获得约33％的剩余空间。

您需要的计算是：(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; }。

＆＃13;

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

＆＃13;

std::cout << "im in here!\n";
PyGILState_STATE sMain = PyGILState_Ensure();

if (sMain)
{
    std::cout << "attempting\n";
    PyRun_SimpleString("import sys; sys.exit();");
    std::cout << "attempted!\n";
}

PyGILState_Release(sMain);

＆＃13;

Answer 2

.banner {

width: 33%  

}

可能要考虑删除最小宽度最大宽度代码，这样就不会在小于或大于最小/最大尺寸的设备上中断。

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

2 个答案: