时间戳

首页 > 解决方案 > Divs 在调整大小时与底部和中心对齐

html - Divs 在调整大小时与底部和中心对齐

问题描述

我有三个 div，根据里面的文本内容，它们都有不同的高度。我在每个 div 的底部都有三个 Read More 按钮，我试图在 div 的所有底部保持相同的垂直位置。此外，无论窗口如何缩放，这些“阅读更多”按钮都需要居中，因为随着窗口的调整，div 将浮动/扩展/收缩。

这是我到目前为止所拥有的。我一切正常，但在调整窗口大小时保持按钮居中。

.main {
  float: left;
  min-height: 180px;
  margin: 2px;
  padding: 30px 0 50 0;
  min-width: 117px;
  position: relative;
}

.btn_learnmore {
  background-color: hsla(358, 13%, 53%, 1.00);
  position: absolute;
  bottom: 0;
  left: 150px;
  padding: 10px
}

.infoContent {
  max-width: 500px;
  float: left;
  margin: 10px
}
<div start.container style="position:relative;  " class=main>
  <div start.s class="infoContent" style="">
    <div>Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh. </div>
  </div>
  <div start.s class="infoContent">

    <div>
      Believing neglected so so allowance existence departure in. In design active temper be uneasy. Thirty for remove plenty regard you summer though. He preference connection astonished on of ye. Partiality on or continuing in particular principles as. Do
      believing oh disposing to supported allowance we. </div>
  </div>

  <div start.s class="infoContent">
    <div>On it differed repeated wandered required in. Then girl neat why yet knew rose spot. Moreover property we he kindness greatest be oh striking laughter. In me he at collecting affronting principles apartments. Has visitor law attacks pretend you calling
      own excited painted. Contented attending smallness it oh ye unwilling. Turned favour man two but lovers. Suffer should if waited common person little oh. Improved civility graceful sex few smallest screened settling. Likely active her warmly has.</div>
  </div>
  <div class=btn_learnmore style="left:10%">Learn More</div>
  <div class=btn_learnmore style="left:450px">Learn More</div>
  <div class=btn_learnmore style="left:750px">Learn More</div>
</div>

标签： htmlcss

解决方案

<style>
    .main {
        display: flex;
        width: 100vw;
    }

    .btn_learnmore {
        background-color: hsla(358, 13%, 53%, 1.00);
        padding: 10px;
        width: 80px;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        top: 450px;
    }

    .infoContent {
        display: flex;
        flex-direction: column;
        width: 30%;
        padding: 10px;
        position: relative;
    }

    .infoContent .paragraph {
        padding: 10px;
        text-align: justify;
    }

</style>

<div start.container style="position:relative;" class=main>
    <div start.s class="infoContent">
        <div class="paragraph">Able an hope of body. Any nay shyness article matters own removal nothing his forming.
            Gay
            own additions
            education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along
            on happy could cease green oh.
        </div>
        <div class=btn_learnmore>Learn More</div>
    </div>
    <div start.s class="infoContent">
        <div class="paragraph">
            Believing neglected so so allowance existence departure in. In design active temper be uneasy. Thirty for
            remove plenty regard you summer though. He preference connection astonished on of ye. Partiality on or
            continuing in particular principles as. Do believing oh disposing to supported allowance we.
        </div>
        <div class=btn_learnmore>Learn More</div>
    </div>

    <div start.s class="infoContent">
        <div class="paragraph">
            On it differed repeated wandered required in. Then girl neat why yet knew rose spot. Moreover property we
            he kindness greatest be oh striking laughter. In me he at collecting affronting principles apartments. Has
            visitor law attacks pretend you calling own excited painted. Contented attending smallness it oh ye
            unwilling. Turned favour man two but lovers. Suffer should if waited common person little oh. Improved
            civility graceful sex few smallest screened settling. Likely active her warmly has.
        </div>
        <div class=btn_learnmore>Learn More</div>
    </div>

</div>
</body>
</html>

推荐阅读