HTMLとCSSを使った小さなテーブルのレイアウト

Question

私はHTMLとCSSの初心者です。 私は、最初の行が1つの列しか持たず、2つ目の行の2つの列にまたがっている2つの行からなるテーブルを実現しようとしています。

最初の行には入力ボックスがあり、その行がこの入力ボックスの高さに一致するようにしたいと思います。左下には独自のスタイルのボタンがあり、ボタンのサイズに合わせて行（およびセル）を使用したいと思います。右下にはイメージがあり、行の高さ（または浮動小数点数）またはセルの幅と垂直方向の中心を塗りつぶすように、イメージの縦横比を維持したまま拡大縮小します。

テーブルはコンテナ（div）を水平に塗りつぶします。

誰でも私にヒントを教えてもらえますか？

テーブル要素は必ずしも必要ではありません。すべてをスケーラブルに保つためにピクセルサイズを指定する必要はありません。ここで

は（いくつかのゴミが残っていてもよい...）私は今持っているものです。

table { 
 
    display: table; 
 
    table-layout: auto; 
 
    width: 100%; 
 
} 
 

 
tr { 
 
    display: table-row; 
 
    width: auto; 
 
    clear: both; 
 
} 
 

 
input { 
 
    font-size: 16px; 
 
} 
 

 
input[name="text"] { 
 
    line-height:1.875; 
 
    display:table-cell; 
 
    width:100%; 
 
} 
 

 
input[type="submit"] { 
 
    border: 0; 
 
    border-radius: 0; 
 
    background: #d7b221; 
 
    box-shadow: none; 
 
    color: white; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    padding: 1.4em 1.6em 1.2em; 
 
} 
 

 
img { 
 
    width: auto; 
 
    height: 52px; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: right; 
 
}

<form> 
 
<table> 
 
<tr> 
 
<td colspan="2"> 
 
<input name="text" placeholder="Enter some text here"/> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td><input type="submit" value="Click Here"/></td> 
 
<td><a href="x"><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/></a></td> 
 
</tr> 
 
</table> 
 
</form>

私はそれが最終的にこれに沸く推測：

#container { 
    border:1px solid red; 
} 

#main_img { 
    height: 30px; 
    width: 30px; 
} 

#dep_img { 
    max-width: 100%; 
    max-height: 100%; 
} 

<div id="container"> 
    <img id="main_img" src="http://i.stack.imgur.com/xkF9Q.jpg"> 
    <img id="dep_img" src="http://i.stack.imgur.com/xkF9Q.jpg"> 
</div> 

メイン画像のサイズ（高さ）が画像のサイズ（高さ）を決める方法はありますか？

Answer 1

CSSを使用してすべてを行うことができるときに、最初のレイアウトでテーブルを使用しているのはなぜですか。 このサイトからCSSを学ぶ：http://learnlayout.com/