Css 保持两张图片水平对齐，同时旁边有一个格式化的段落

我正在建立一个网站，我有两个图像的大小是300x250，如果你需要它。我的问题是，我希望图片水平对齐，右边有一个风格化的段落（标题和下面的要点）

我的HTML

<div class = "mainthing">
  <div class = "pilli">
    <img class="pillipic" src="f..../pilli.jpg">
    when i add text here with a ["br"] or using ["pre"] it changes second picture locaiton.
  </div>
  <div class="shaun">
    <img class="shaunpic" src="../shaun.jpg">
  </div>
  want the second paragraph to go here to right of the second image
</div>

---

我尝试了几种不同的方法，但它总是改变第二张图片的位置。我将感谢任何帮助。我使用vh/vw作为主

div

的原因是网站上有一个单独的标题，该标题有按钮和左侧。我在工作，这正是当前给我带来麻烦的问题。

给

浮动：对
的

.shaunpic {
  max-width: 100%;
  height: auto;
  float: right;
}

大概是这样的：


.main{
边际上限：20vh；
左边距：20vw；
边缘底部：20vh；
保证金权利：20vw；
最大宽度：100%；
文本对齐：居中；
}
皮利皮克先生{
最大宽度：100%；
高度：自动；
浮动：左；
}
shaunpic先生{
最大宽度：100%；
高度：自动；
浮动：对；
}
.pilli、.shaun{clear:both；}

当我在这里添加带有[“br”]或使用[“pre”]的文本时，它会更改第二张图片的位置。
想把第二段放到第二幅图的右边吗
看看这个-我想这就是你想要的：

HTML:

这是一个

至于在文本旁边放置一个项目符号-只需使用（ALT+7）。
我宁愿使用ul>li结构来进行这种类型的列表

然后您可以为“li”指定宽度，将“img”和“p”放在里面，还可以设置它们的宽度，并给出浮动或显示：内联块

在这种情况下，您可以确定没有任何东西会使您的结构崩溃。
当然，这是一个大致的大纲。

干杯：）。
您想要每张图片下面的文字吗？或者，您希望文本位于每个图像旁边，但每个图像都在同一行上，而不是在另一行下有一个图像分隔符？根据对所需输出的有限描述，只需将文本包装在一个元素中，然后给出所有元素（包含段落的图像和div）可能会有所帮助
display:inline block
。是的，我希望图像在同一行上。文本与右侧对应的图像对齐，而不是在下方。迈克尔给出的答案我认为是可行的。对不起，我的问题没有更具体。
.shaunpic {
  max-width: 100%;
  height: auto;
  float: right;
}

<div class="mainthing">
    <div class="pilli">
        <img class="pillipic" src="f..../pilli.jpg">
            when i add text here with a or using it changes second picture locaiton.
    </div>
    <div class="shaun">
        <img class="shaunpic" src="../shaun.jpg">
            want the second paragraph to go here to right of the second image
    </div>
</div>

.mainthing {
    margin-top: 20vh;
    margin-left: 20vw;
    margin-bottom: 20vh;
    margin-right: 20vw;
    max-width: 100%;
    text-align: center;
}
.pilli {
    /* ADDED THIS */
    width: 50%;
    float: left;
    display: inline-block;
}
.pillipic {
    max-width: 100%;
    height: auto;
    float: left;
}
.shaun {
    /* ADDED THIS */
    width: 50%;
    float: left;
    display: inline-block;
}
.shaunpic {
    max-width: 100%;
    height: auto;
    float: left;
}