Geek Answers Handbook

CSS is the only way to ensure that an inline element is at least as wide as tall

I have a number of HTML elements with display: inline-block . They look like boxes. Here's a simplified example:

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

I need each box to be at least wide , given the following restrictions:

  • CSS only. No javascript
  • The height and width of the drawers cannot be set explicitly (including min and max)
  • inline-block . A long row of boxes will need to be wrapped beautifully, automatically
  • The content inside each window should be centered.

I found a technique that would make an element at least as tall as wide, but rely on the fact that the percentage is the length for margin or padding relative to the width of the element. There seems to be no equivalent for creating a box that is at least as wide as tall.

Is it possible?

+7
html css
source share
1 answer

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

If you want the content to start at the top and not vertically centered, change the addition of .box-content to padding-bottom: 100%

-one
source share

More articles:


All Articles