html - 固定 2 列内的内容

Question

我正在尝试从 HTML 生成 PDF，我已经能够做到，但是我在正确设置 HTML 列时遇到了问题。

我有 2 个名为 a 和 b 的列，请参阅代码:

.a{
    background: red;
    width: 24%;
    display: inline-block;
    padding: 5px;
  }

 .b{
    background: blue;
    width: 74%;
    display: inline-block;
    padding: 5px;
  }

A 列将包含 5 个图标，B 列将包含文本、标题等。我遇到的问题是 A 列中的图像根据 B 列中输入的数据量移动，并且反之亦然。

我想修复两列中的内容，因此无论在 B 列中输入多少文本，图标都会保持不变。

下图显示了我得到的输出:

大量文本

少量文本

如果我没有正确解释，请道歉，请告诉我，我会尽力解释得更好。

Answer 1

默认情况下，inline-block 元素有vertical-align: baseline。如果您希望列在顶部对齐，请在列上使用 vertical-align: top。

.a {
  background: red;
  width: 25%; 
}

.b {
  background: blue;
  width: 75%;
}

.a, .b {
  vertical-align: top;
  display: inline-block;
  padding: 5px;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

<div class="a">
  <img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img
    src="/image/2C22p.jpg"><img src="/image/2C22p.jpg"><img src="/image/2C22p.jpg">
</div><!--
--><div class="b">Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>Column A would contain 5 icons and Column B would contain Text, Heading etc. The issue I am having is that the images in Columns A move based on the amount of data entered in Column B and vice versa.

  <br>
</div>