我有一系列带有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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。