Html CSS显示大小因文本长度而改变

我想制作一个格式化的段落，其图像位于左侧，文本位于右侧，使用CSS

但是，当我键入单行文本时，它看起来不错，但当我键入两行或更多行文本时，顶部位置会发生变化

它的来源是

CSS的主要部分是：

.post-container {
    margin: 20px 20px 0 0;
    border: 1px dotted #333;
    overflow: auto;
}
.greenbox {
    display: block;
    border: 1px dotted #383;
    width: 100%;
}
.redbox {
    display: inline-block;
    border: 1px dotted #f33;
    width: 70%;
    height: 100px;
}
.redbox10 {
    display: inline-block;
    border: 1px dotted #f33;
    width: 20%;
    height: 100px;
}

其HTML代码如下所示：

<div class="greenbox">
    <div class="redbox10">
        <img src="#">
    </div>
    <div class="redbox">
        One Line Text
    </div>
</div>    

单行文本

我怎样才能将顶行与键入的内容放在同一行

---

谢谢您的帮助。

将左列设置为顶部对齐

.redbox10 {
  vertical-align: top;
}

---

您需要将垂直对齐指定为顶部：

.redbox, img{
  display: inline-block;
  vertical-align: top;
}

以下是更新的

您应该使用float：

.redbox {
    float: left;
}
.redbox10 {
    float: left;
}

你可以给他们一个

空白

，留一些空间

---

如果使用表格制作，这可以相当简化

我希望这有帮助

.main表{
填充：10px；
}
.outerRow{
填充：10px；
}
.imageColumn{
边框：1px实心；
填充：10px；
垂直对齐：顶部；
}
.textColumn{
边框：1px实心；
填充：10px；
}

单行文本
两行文字-rai oda bi iod ieo idoosido oiojs oijodif oijoa oijsdf
三行文字-rai oda bi iod ieo idoosido oiojs oijodif oijoa oijsdf你好你好你好你好你好你好你好你好你好
你应该考虑接受一个答案。（单击右箭头）