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

我有一系列带有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％

原文链接：https://www.f2er.com/html/227244.html

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

解决方法

猜你在找的HTML相关文章