修复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="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img
    src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/2C22p.jpg"><img src="https://i.stack.imgur.com/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>