使用内联块将文本对齐div的底部

Question

我无法将某些文本对齐到div的底部，作为内联块的显示。

但是我不能将文本“BackOffice”放在div的右下角......

我尝试过使用vertical-align。我已经在div中使用了div，在div内部，等等，我已经尝试过表格单元，但实际上没有任何效果。

任何想法？ （是的，我几乎阅读了本网站和其他论坛的每一个主题，没有什么真正有效。

这是我的代码。 谢谢！

#firstBox, #secondBox, #thirdBox, #fourthBox, #fifthBox {
  width: 20%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  color: white;
}

#firstBox {
  background: url(/images/black.jpg);
}

#secondBox {
  background: url(/images/blue.png);
}

<div class="header">
  <!-- Todos os elementos(divs) têm que estar preenchidos para não perder o formato de linha. -->
  <div id="firstBox"><!--
--><div id="firstBox-content>"><a href="backoffice.php">Backoffice</a></div>
  </div><!--
--><div id="secondBox"><a href="">Backoffice</a>
  </div><!--
--><div id="thirdBox"><a href="">Backoffice</a>
  </div><!--
--><div id="fourthBox"><a href="">Backoffice</a>
  </div><!--
--><div id="fifthBox"><a href="">Backoffice</a>
  </div>
</div>

（除了背景更改之外，其他方框都是相同的）

Answer 1

Flexbox 可以做到这一点：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header {
  display: flex;
}
#firstBox,
#secondBox,
#thirdBox,
#fourthBox,
#fifthBox {
  width: 20%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: white;
  border: 1px solid green;
}

＆＃13;

<div class="header">
  <div id="firstBox">
    <div id="firstBox-content>"><a href="backoffice.php">Backoffice</a>
    </div>
  </div>
  <div id="secondBox"><a href="">Backoffice</a>
  </div>
  <div id="thirdBox"><a href="">Backoffice</a>
  </div>
  <div id="fourthBox"><a href="">Backoffice</a>
  </div>
  <div id="fifthBox"><a href="">Backoffice</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或使用 CSS表格

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#firstBox,
#secondBox,
#thirdBox,
#fourthBox,
#fifthBox {
  width: 20%;
  height: 200px;
  display: table-cell;
  color: white;
  border: 1px solid green;
  vertical-align: bottom;
  text-align: right;
}

＆＃13;

<div class="header">
  <div id="firstBox">
    <!--
        -->
    <div id="firstBox-content>"><a href="backoffice.php">Backoffice</a>
    </div>
  </div>
  <!--
        -->
  <div id="secondBox"><a href="">Backoffice</a>
  </div>
  <!--
        -->
  <div id="thirdBox"><a href="">Backoffice</a>
  </div>
  <!--
        -->
  <div id="fourthBox"><a href="">Backoffice</a>
  </div>
  <!--
        -->
  <div id="fifthBox"><a href="">Backoffice</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过将position:relative添加到父元素并将position:absolute添加到具有两个属性的子元素来实现此目的，如下所示

#firstBox, #secondBox, #thirdBox, #fourthBox, #fifthBox{position:relative}
#firstBox a, #secondBox a, #thirdBox a, #fourthBox a, #fifthBox a{position:absolute; bottom:5px; right:5px}

或者 通过向#firstBox, #secondBox, #thirdBox, #fourthBox, #fifthBox添加以下属性，您可以实现display: table-cell;vertical-align:bottom;text-align:right

Answer 3

我喜欢使用“相对+绝对”定位

试用此代码：

#row {
  width: 100%;
}

#firstBox,
#secondBox,
#thirdBox,
#fourthBox,
#fifthBox {
  width: 20%;
  height: 200px;
  margin: 0;
  display: block;
  position: relative;
  float: left;
}

#firstBox {
  background-color: black;
}

#secondBox {
  background-color: blue;
}

#thirdBox {
  background-color: green;
}

#fourthBox {
  background-color: purple;
}

#fifthBox {
  background-color: yellow;
}

.content {
  position: absolute;
  bottom: 0;
  right: 0;
}

a {
  text-decoration: none;
  color: white;
  float: right;
}

<div class="header">
  <div id="row">
    <div id="firstBox">
      <div class="content">
        <a href="backoffice.php">Backoffice</a>
      </div>
    </div>
    <div id="secondBox">
      <div class="content">
        <a href="">Backoffice</a>
      </div>
    </div>
    <div id="thirdBox">
      <div class="content">
        <a href="">Backoffice</a>
      </div>
    </div>
    <div id="fourthBox">
      <div class="content">
        <a href="">Backoffice</a>
      </div>
    </div>
    <div id="fifthBox">
      <div class="content">
        <a href="">Backoffice</a>
      </div>
    </div>
  </div>
</div>

您无法将Vertical-align应用于元素 有关更多信息：请阅读Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 4

为了完整性，并直接回答所提出的问题，这里是如何使用display:inline-block; -

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header > div {
  text-align:right;
}
.header > div::after {
  content: '';
  line-height: 200px;
}

.header > div * {
  display:inline-block;
  vertical-align:bottom;
}

#firstBox,
#secondBox,
#thirdBox,
#fourthBox,
#fifthBox {
  width: 20%;
  height: 200px;
  display: inline-block;
  color: white;
  border: 1px solid green;
  margin-right:-4px;
}

<div class="header">
  <div id="firstBox">
    <div id="firstBox-content>"><a href="backoffice.php">Backoffice</a>
    </div>
  </div>
  <div id="secondBox"><a href="">Backoffice</a>
  </div>
  <div id="thirdBox"><a href="">Backoffice</a>
  </div>
  <div id="fourthBox"><a href="">Backoffice</a>
  </div>
  <div id="fifthBox"><a href="">Backoffice</a>
  </div>
</div>