html - セル内のコンテンツをシフトして表の行の高さを制御する方法

Question

次のデザインの簡単なページを作成する必要があります。

最初の行の正方形は、実際には次のようになっているはずです。

そのために、2 つの列と 3 つの行を持つテーブルを作成し、小さな正方形を描画する 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>

ここに私が持っているものがあります: ここに私が必要なものがあります:

そのため、表の行の高さを変更して画像の下部に揃える方法がわかりません。containerRightBottomまた、テーブルの上端のすぐ下にショーを作成し、テーブルのすぐ上にショーを作成する方法もわかりませんcontainerRightTop。

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

Answer 1

もう少しコードを表示できますか? または、この css を使用してみてください:

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

Answer 2

この構造のようなものが欲しいですか？

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>

CSS ::

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

フィドル

Answer 3

このcssを使用して、両方を下部に配置する方法を考え出したと思います: そして、squareClassの高さを変更することで高さを制御できます! わーい！

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