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>

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

1 个答案: