将忽略每个框的绘图框和宽度，并且常规间距不起作用

Question

在这里遇到很多问题：

.apple {
height: 100px;
width: 100px;
border: 1px;
border-top-style: solid;
border-top-color: red;
background-color: blue;
text-align: justify;
}

有关完整代码，请访问： https://jsfiddle.net/jennielisajane/4sb8upa6/#&togetherjs=pabeHPuntm

(如果您能直接在jsfiddle上合作，我将不胜感激)

嗨，我希望这些框垂直分布均匀。现在它没有间隔。

此外，我设置了每个框的宽度和高度，不知何故，只有第三个框在 css 中尊重宽度和高度。为什么会这样？

另外，您如何水平居中第一个和第二个框的文本？

我还想将第三个框中的文本垂直居中。

提前谢谢你。

在上面的链接中提供

https://jsfiddle.net/jennielisajane/4sb8upa6/#&togetherjs=pabeHPuntm

Answer 1

你忘了用类苹果、蜜蜂和橙子关闭div标签。

应该是：

<div class="gen">
<div class="apple">
<div>apple</div>
</div>
<div class="bee">
<div>bee</div>
</div>
<div class="orange">
<div>orange</div>
</div>
</div>

而不是：

<div class="gen">
<div class="apple"> <div>apple</div>
<div class="bee"> <div>bee</div>
<div class="orange"> <div>orange</div>
</div>