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>

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

1 个答案: