html - 图纸框和每个框的宽度将被忽略，常规间距不起作用

在这里遇到很多问题：

.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

最佳答案

您忘记使用apple，bee和orange类关闭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>