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

发布时间：2020-12-14 16:37:17 所属栏目：资源来源：网络整理

导读：我有一系列带有display的 HTML元素：inline-block.它们看起来像盒子.这是一个简化的例子： .box { display: inline-block; border: solid darkblue 1px; padding: 5px; margin-right: 1em; text-align: center; background-color: lightgoldenrodyellow;} di

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

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

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

我需要的是每个盒子至少与它的高度一样宽,受到以下限制：

>仅限CSS.没有JavaScript
>无法明确设置框的高度和宽度(包括最小值和最大值)
>内联块行为至关重要.一长串的盒子需要很好地自动包裹
>每个框内的内容应居中对齐

我发现a technique会使元素至少与宽度一样高,但这取决于边距或填充的百分比长度相对于元素的宽度这一事实.似乎没有相当于制作一个至少与高一样宽的盒子.

可能吗？

解决方法

.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内容填充更改为padding-bottom：100％

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!