Html 如何在div中继承高度？

我正在自学基本的HTML5和CSS，我一直在使用

div

而不是许多博客作者和web开发人员推荐的

table

。但现在我有一个问题：

我试着让一张桌子看起来像这样：

（来源：）

使用此代码：

CSS

HTML

随机数：
测试1
测试2
test3
test3
test3
test3
test3
test3
睾丸

row2应该有两列在里面。第一列再分成两行，每行有行2高度的50%。但事实并非如此。我怎么修理它？

---

基本上，我想要两列，第一列分为两行，但我不知道如何设置。

您好，检查这段代码，我试图解决您的问题。要处理%的div高度，你需要小心，因为要让它工作，他的父母都需要在%或px上设置高度

这里是css

.table {
    font-size:14px;
    border-style:solid;
    border-width:2px;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
}
#row2 {
    height:300px;
    width:500px;
}
#row2column1, #row2column2 {
    width:50%;
    height:100%;
    color:#fff;
    background-color:#000;
}
#row2column1 .celd{
    height:50%;
    background-color:#666;
}

和HTML

<div>
  <div id="row1">
   <div class="table" style="min-width:500px;max-width:500px;">Random Number:<?php echo $gRandNum; ?></div>
  </div>
  <div id="row2" style="min-height:140px;">
   <div id="row2column1" style="float:left;margin:auto;">
    <div id="row2column1row1" class="celd">
     <div class="celd">test1</div>
     </div>
    <div id="row2column1row2" class="celd">
     <div class="celd">test2</div>
    </div>
  </div>
  <div id="row2column2" style="float:right">
   test3<br>test3<br>test3<br>test3<br>test3<br>test3
  </div>
 </div>
 <div id="row3" style="width:500px;">
  <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
 </div>
</div>

随机数：
测试1
测试2
test3
test3
test3
test3
test3
test3
睾丸

如果你需要一些更复杂的元素，你必须使用%an dinamic heights

---

另一个提示：不要内联设置样式，将其全部放在css文件中

你好，rid。谢谢你的回答。我曾考虑过使用

来处理数据，因为这个css可以处理很多兰特数字，但我尝试使用

，因为它非常清晰和漂亮（当然，当高端完成时）。哦，我还试着使用了

display:table

，但没用；这就是它现在的样子：表是用于数据的，因此用表显示表格数据不仅更具语义，而且通常比试图使一组div的功能类似于一个表要好。我认为真正的问题是，你到底想展示什么？如果这是一个页面布局（如链接到的图像），则应使用divs。如果这是显示数据的行和列，那么您可能应该使用表。我明白您的意思。是的，我试图用

而不是

来显示数据，可能是因为我误解了它的用途。谢谢你，谢谢你，丹科！你的回答很好，我很感激你的建议。

.table {
    font-size:14px;
    border-style:solid;
    border-width:2px;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
}
#row2 {
    height:300px;
    width:500px;
}
#row2column1, #row2column2 {
    width:50%;
    height:100%;
    color:#fff;
    background-color:#000;
}
#row2column1 .celd{
    height:50%;
    background-color:#666;
}

<div>
  <div id="row1">
   <div class="table" style="min-width:500px;max-width:500px;">Random Number:<?php echo $gRandNum; ?></div>
  </div>
  <div id="row2" style="min-height:140px;">
   <div id="row2column1" style="float:left;margin:auto;">
    <div id="row2column1row1" class="celd">
     <div class="celd">test1</div>
     </div>
    <div id="row2column1row2" class="celd">
     <div class="celd">test2</div>
    </div>
  </div>
  <div id="row2column2" style="float:right">
   test3<br>test3<br>test3<br>test3<br>test3<br>test3
  </div>
 </div>
 <div id="row3" style="width:500px;">
  <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
 </div>
</div>