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

Question

我需要做一个具有以下设计的简单页面:

第一行的正方形实际上应该是这样的:

为此，我创建了一个包含两列和三行的表格，并且我想创建一个 div 来绘制小方 block 。我可以使用以下方法在此处添加正方形:

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

但我遇到的问题是我不知道如何更改第一行的高度(这是小方 block 的高度，即使它向上移动了也是如此。

有什么想法吗？

编辑:

代码如下:

<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>

这是我的: 这是我需要的:

所以我不确定如何更改表格行的高度以使其与图像底部对齐。我也不知道如何让 containerRightBottom 显示在表格顶部边框的正下方，而 containerRightTop 显示在表格的正上方。

jsfiddle:http://jsfiddle.net/pkU8T/

Answer 1

你能再展示一些代码吗？或尝试使用此 css:

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