Question

我有一系列带display: inline-block的HTML元素。它们看起来像盒子。这是一个简单的例子：

＆＃13;

.box {
  display: inline-block;
  border: solid darkblue 1px;
  padding: 5px;
  margin-right: 1em;
  text-align: center;
  background-color: lightgoldenrodyellow;
}

＆＃13;

<div class="box">This<br>is<br>a<br>box</div>
<div class="box">This<br>is<br>a<br>tall<br>box</div>
<div class="box">This box is wider than it is tall<br>and therefore needs no adjustment</div>

＆＃13;

我需要的是每个框至少与它的高度一样宽，受以下限制：

仅限CSS。没有JavaScript
无法明确设置框的高度和宽度（包括最小和最大）
inline-block行为至关重要。一长串的盒子需要很好地自动包装
每个框内的内容应居中对齐

我发现a technique会使元素至少和广泛一样高，但这取决于margin或padding的百分比长度相对于元素的宽度。似乎没有相应的方法来制作一个至少与它一样宽的盒子。

有可能吗？

Answer 1

.box{
  display: inline-block;
 border: solid darkblue 1px;
  padding: 5px;
  margin-right: 1em;
  text-align: center;
  background-color: lightgoldenrodyellow; 
}

.box-content{
  margin: 0;
  padding: 50% 0;
  height: 0;
}

<div class="box">
  <div class="box-content"> Quae eveniet</div>
</div>

<div class="box">
  <div class="box-content">Lorem ipsum, consectetur adipisicing elit.  </div>
</div>

<div class="box">
  <div class="box-content">facilis quos in repellendus rerum sequi. Magnam dolores commodi rem nemo, aliquam!</div>
</div>

如果您希望内容从顶部开始而不是垂直居中，请将.box-content填充更改为padding-bottom: 100%

确保内联块元素的CSS唯一方法至少与它的高度一样宽

1 个答案: