Html 如何使用单元格中移动的内容控制表格行高

我需要用以下设计制作一个简单的页面：

第一排的正方形应该是这样的：

为了做到这一点，我正在创建一个包含两列和三行的表，我想创建一个div来绘制这个小正方形。我可以使用以下方法在此处添加正方形：

 .squareClass{
    position: relative;
    top: -80px; 
    left: 20px;
 }

但我遇到的问题是，我不知道如何更改第一排的高度（即小正方形的高度，即使它向上移动）

有什么想法吗

编辑：

下面是代码：

<div class="container">
<table  border=1 style="width: 800px;">
<tr>
    <td>
        <div class="squareClass" style="position: relative; top: -80px; left: 20px;">

            <div class="imageClass" style="float: left; border: 2px solid blue;"><img src="something.png" ></div>
            <divclass="infoClass" style="border: 2px solid yellow;"> 
                <div class="containerRightTop"> some text </div>
                <div class="containerRightBottom"> some other text </div>
            </div>
        </div>
    </td>
    <td>
        <div class="squareClass" style="position: relative; top: -80px; left: 20px;">

            <div class="imageClass" style="float: left; border: 2px solid blue;"><img src="something2.png" ></div>
            <div> 
                <div class="containerRightTop"> some text 2</div>
                <div class="containerRightBottom"> some other text 2</div>
            </div>
        </div>
    </td>
</tr>
<tr><td>cell21 content - just text</td><td>cell22 content- text</td></tr>
</table>
</div>

一些文本
其他一些文本
一些文本2
其他一些文本2
cell21内容-仅文本Cell22内容-文本

以下是我所拥有的： 以下是我需要的：

因此，我不知道如何更改表格行的高度，使其与图像底部对齐。我也不知道如何使

containerRightBottom

显示在表格顶部边框的正下方，以及

containerRightTop

显示在表格顶部

---

JSFIDLE:

您能再显示一些代码吗？或者尝试使用以下css:

 .squareClass{  float:left; width: 100px; height: 100px;  }

---

我想我找到了如何使用css在底部对齐两者： 我可以通过改变高度来控制高度！耶

div.squareClass {
                position: relative;             
                width: 100%;
                height: 110px;
}
div.imageClass {
                position: absolute;
                left: 0px;
                bottom: 0px;
                padding: 10px;
                width: 45%;
                border: 1px solid gray;
            }

 div.infoClass {
     position: absolute;
     right: 0px;
     bottom: 0px;
     padding: 10px;
     width: 45%;
     border: 1px solid gray;
 }

---

你想要这样的结构吗

html:：

<table>
<tr>
    <td>
        <div class="first"></div>
        <div class="text"> 
            <div class="containerRightTop"> some text </div>
            <div class="containerRightBottom"> some other text</div>
        </div>
    </td>
    <td><div class="second"></div></td>
</tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>

---

那么正方形的高度是可变的吗？不是真的。图像有一个定义的大小。“containerRightBottom”的内容是定义的和静态的。所以我也知道高度。“containerRightBottom”的底部必须与图像的底部对齐。“containerRightBottom”的顶部必须触摸表的顶部（容器）抱歉，我以前没有添加完整代码。我刚刚编辑了它以添加更多代码和信息。BMF，您能告诉我您的确切问题（通过图像）以及您希望使用哪种方法，如表或div？

table{width:100%;position:absolute;top:30%;left:0;}
td{
width:50%;
height:100px;
border:1px solid black;
}
.first{
position:absolute;
top:-20%;
left:10%;
z-index:1000;
width:80px;
height:100px;
border:1px solid black;
background:green;
}

.second{
position:absolute;
top:-20%;
left:70%;
z-index:1000;
width:80px;
height:100px;
border:1px solid black;
background:green;
}
.text{
position:absolute;
top:-10%;
left:27%;
z-index:1000;
border:1px solid yellow;
background:white;
}