Adjacent divs must be same height, resize responsively, and have interior absolutely positioned element

StackOverflow https://stackoverflow.com/questions/23414996

  •  13-07-2023
  •  | 
  •  

Pergunta

Like the title says. These adjacent divs have the be the same height, resize with the browser window, and have these little icons absolutely positioned on the corners. This solution, using display:table-cell, works in all browsers except Firefox (where the icons end up at the bottom of the page). I understand this is a long-standing FF bug, but I can't find a better way to keep these divs the same height.

<div class="contain">
    <div class="text-box">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
    </div>
    <div class="text-box">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
    </div>
</div>

div.contain {
    display: table;
    margin: 0 auto;
    min-width: 200px;
    max-width: 1000px;
    border-spacing: 20px;
}
     .text-box {
        display: table-cell;
        position: relative;
        width: 25%;
        background: red;
    }
        .text-box::before {
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            bottom: 0;
            right: 0;
            margin-bottom: -10px;
            margin-right: -10px;
            background: blue;
            content: "";
        }

http://jsfiddle.net/d24U6/1/

Foi útil?

Solução

Use CSS Flexbox.

jsfiddle

Code:

<html>
<head>
<title>Equal Height Demo</title>

<style>

  .container,
  .content,
  .icon { display: flex; }

  .content { position: relative; margin-right: 20px; width: 30%; background: #fcc; }
  .content:nth-child(2) { background: #cfc; }

  .icon { position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; background: #ccf; }

</style>
</head>
<body>

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <div class="icon"></div>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="icon"></div>
  </div>
</div>

</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top