将父元素内的两个元素定位为相同高度

Question

我有 2 个 div，我需要将它们放置在包含 div 的内部因此，绝对值和顶部底部设置为 0，当前容器 div #three 折叠并隐藏两个缩略图 div 内容。

section#three {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 70px 0px 70px 0px;
    position: relative;
}

section#three div.thumb-container {
    width: 40%;
    top: 0;
    bottom: 0;
    position: absolute;
    clear: both;
}

section#three div#left-thumb-container {
    left: 5%;
}

section#three div#right-thumb-container {
    right: 5%;
}

<section id="three">
    <div class="thumb-container" id="left-thumb-container">
        content will be here to expand the divs
    </div>

    <div class="thumb-container" id="right-thumb-container">
        content will be here to expand the divs
    </div>
</section>

Answer 1

我会推荐使用 flexbox 来解决这个问题。 https://codepen.io/imohkay/pen/gpard 你可以在那里看到例子。

#three {
  display: flex;
}

.thumb-container {
  background: gray;
  border-left: 1px solid #fff;
  flex: 1 0;
  padding: 30px;
}

<section id="three">
    <div class="thumb-container" id="left-thumb-container">
        content will be here to expand the divs
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente beatae nulla earum error reiciendis molestias praesentium, doloribus esse provident harum illum, voluptate vero ratione unde fugit repellendus laboriosam ad officiis.</p>
    </div>

    <div class="thumb-container" id="right-thumb-container">
        content will be here to expand the divs
    </div>
</section>

将父元素内的两个元素定位为相同高度

positioning two elements inside a parent to be the same height

html

css

position

absolute