使用 HTML 和 CSS 布局一个小表

Question

我对HTML和CSS非常陌生，还没有"了解"它是如何工作的。 我正在尝试实现一个由两行组成的表格，其中第一行只有一列，并且跨越第二行的两列。

在第一行中，我有一个输入框，我希望该行符合此输入框的高度。在左下角，我有一个带有自己样式的按钮，我希望行(和单元格)符合按钮的大小。在右下角，我有一个图像，我希望图像缩放(保留其纵横比)，以便它填充行的高度(并向右浮动)或单元格的宽度并垂直居中。

该表将水平填充其容器(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="https://i.stack.imgur.com/xkF9Q.jpg">
<img id="dep_img" src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

有什么方法可以让主图像的大小(高度)决定 dep 图像的大小(高度)？

Answer 1

当你可以只用 CSS 完成所有这些工作时，为什么要首先使用表格进行布局。 从这个网站学习 CSS： http://learnlayout.com/

Answer 2

如果您只希望所有图像具有相同的大小，那么可以通过对图像使用类轻松解决。

#container {
border:1px solid red;
padding: 5px;
}
.my-kind-of-image {
height: 30px;
width: 30px;
}

<div id="container">
<img class="my-kind-of-image" src="https://i.stack.imgur.com/xkF9Q.jpg">
<img class="my-kind-of-image" src="https://i.stack.imgur.com/xkF9Q.jpg">
<img class="my-kind-of-image" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>
</div>