HTML创建了两个高度不同的div

Question

我想用HTML并排创建两个div。它们的宽度应该相同，并且都应该有边界。然而，我希望这些盒子能有多长就有多长，即适应里面写的文本量。所以一个盒子会比另一个长。

我尝试过这个代码，但是div的高度相同，并且不会根据文本进行更改。你知道我能做些什么来修复它吗？

<div style="display: table-row;">
<div style="width: 100%; display: table;">
<div style="display: table-row;">
<div style="width: 50%; height; float; display: table-cell; background:white; color:gray; border: dotted 5px; border-color:red">
Div 1
</div>
<div style="display: table-cell; background:green; color:white; padding:20px; border: dotted 5px;; border-color:blue">
Div 2
</div>
</div>
</div>

Answer 1

首先，您必须为div的宽度指定一个指定量，例如300像素。然后将第二个div的显示更改为flexbox。选中下方

<div style="display: table-row;">
<div style="width: 100%; display: table;">
<div style="display: table-row;">
<div style="width: 300px; display: table-cell; background:white; color:gray; border: dotted 5px; border-color:red">
some text
</div>
<div style="width: 300px; display: flexbox; background:green; color:white; border: dotted 5px;; border-color:blue">
some text
</div>
</div>
</div>
</div>