如何在每个框中放置项目以便它们保持一致？

Question

我尝试使用

等内联样式

#whiteRectangle{
top:5% 
}

尝试手动移动它，但这不起作用。

上面列出的我的代码笔显示了到目前为止我已经尝试过的内容以及问题的外观。对于将文本和白色矩形移动到第五个框的任何指导，将不胜感激。

第二个较小的问题：每个框内的每个文本与上面设计中显示的文本不同。也就是说，例如，我们有

我尝试删除      text-align：center

但是问题仍然存在，因此也将不胜感激关于第二个问题的任何指点。

Answer 1

如果要对齐白线（whiteRectangle），请将文本包装在div中。您也可以摆脱br标签的“应用”，并使用我提供的CSS顶部。

<div class="lineup"> 
  Facebook <br/> 
  Competition <br/> 
  Apps <br/> 
  <div class="whiteRectangle"> 
</div>

然后将以下内容添加到CSS

.lineup{
  position: relative;
  top:-20px;
}

Answer 2

我不知道您是否会接受此解决方案，但是如果您希望三个“白色矩形”对齐，则可以在广告内容的顶部添加另一个br标签旁边的两个盒子。

    <br /> 
    Facebook <br/>
    Outreach <br/>

和

    <br />
    Facebook <br/>
    Networking <br/>

另一种解决方案是包装盒子的全部内容，将其position设置为absolute，然后为bottom设置一个固定值。