如何将绝对孩子的垂直位置与父div对齐答案

【问题标题】：how to align absolute child's vertical position to parent div如何将绝对孩子的垂直位置与父div对齐
【发布时间】：2017-12-01 00:35:51
【问题描述】：

我试图让子 div (option-info) 保持在父 div 的下方，但也给它们 100% 的宽度。

现在孩子们居中并且有 100% 但没有相对于父 div 定位。有没有办法给子 div 绝对宽度但在 CSS 和 HTML 中垂直相对定位？提前致谢！

这是 HTML：

    <div id="container">

<div class="option-container">
<div class="header">hardware</div>
<div class="option-info">test</div>
</div>

<div class="option-container">
<div class="header">design</div>
<div class="option-info">test</div>
</div>

<div class="option-container">
<div class="header">software</div>
<div class="option-info">test</div>
</div>

<div class="option-container">
<div class="header">gaming</div>
<div class="option-info">test</div>
</div>

</div>

这是 CSS：

.header {
display: inline-block;
position: relative;
background-color: rgb(81, 154, 226);
font-size: 2.3em;
height: 100px;
color: white;
font-family: 'saira', arial;
text-shadow: 2px 2px #2280dd;
width: 250px;
text-align: center;
text-transform: uppercase;
margin: auto;
top: 70px;
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
z-index: 1;
line-height: 100px;
}

#container {
text-align: center;
width: 100%;
}

.option-container {
display: inline-block;
width: 250px;
margin: 22px 22px 100px 22px;
}

.option-info {
display: inline-block;
position: absolute;
width: 100%;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align:  center;
right: 0;
left: 0;
}

【问题讨论】：

你能重组你的HTML吗？我认为你想要的 CSS 会很混乱（如果可能的话）
简短的回答是否定的，在 CSS 中没有一个好的、干净的方法来做到这一点。你可以使用 JavaScript 来做，但这本身就是一团糟，尤其是在没有 jQuery 等浏览器差异抽象库的情况下。在这种情况下，重新考虑设计通常是最好的解决方案。

标签： html css

【解决方案1】：

这样的东西对你有用吗？我从 HTML 中取出 option-info 元素并使用 :after 伪将文本插入到所需的（如果我理解正确的话）位置。

.header {
display: inline-block;
position: relative;
background-color: rgb(81, 154, 226);
font-size: 2.3em;
height: 100px;
color: white;
font-family: 'saira', arial;
text-shadow: 2px 2px #2280dd;
width: 250px;
text-align: center;
text-transform: uppercase;
margin: auto;
top: 70px;
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
z-index: 1;
line-height: 100px;
}

#container {
text-align: center;
width: 100%;
}

.option-container {
display: inline-block;
width: 250px;
margin: 22px 22px 100px 22px;
  position: relative;
}

.option-container:after {
  width: 100%;
  position: absolute;
  padding: 10px 0;
  content: 'test';
  bottom: -120px;
  left: 0;
  z-index: 9999;
  font-family: 'roboto', arial;
  font-size: 1.3em;
  text-align:  center;
  }

<div id="container">

<div class="option-container">
<div class="header">hardware</div>
</div>

<div class="option-container">
<div class="header">design</div>
</div>

<div class="option-container">
<div class="header">software</div>
</div>

<div class="option-container">
<div class="header">gaming</div>
</div>

</div>

【讨论】：

【解决方案2】：

所以我尝试重构 HTML，这就是我想出的，这正是我想要的！

<div class="option-container">
<div class="header">hardware</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>

<div class="option-container">
<div class="header">design</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>

<div class="option-container">
<div class="header">software</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>

<div class="option-container">
<div class="header">gaming</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>

我只是用 CSS 改变了两件事：

.info-container {
position: absolute;
width: 100%;
right: 0;
left: 0;
height: 100%;
}

.option-info {
display: inline-block;
position: relative;
width: 100%;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align:  center;
color: black;
color: rgba(0, 0, 0, 0.9);
margin: auto;
top: 100px;
}

编辑：我很欣赏答案，但似乎我解决了自己的问题。

【讨论】：