html - 使用 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="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/