Question

我正在尝试让子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;
}

Answer 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>

Answer 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;
}

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

如何将绝对子项的垂直位置与父div对齐

2 个答案: