HTML显示内联

Question

我想写这张照片：

实际上有3个元素 - img，h3＆amp;段落......我想要两个盒子 - 在第一个盒子中将img垂直对齐在中间，第二个盒子包含H3（对齐：左），在H3下面有一个段落。

我的代码如下（我只能使用内联CSS）：

 <a href="#" style="text-decoration:none;">
<div style="border:1px solid grey;">
<div name="first_box" style="float:left;">
  <img style="margin-top:30px;" src="https://rsm.cz/wp-content/uploads/virtu.png" alt="try" />
</div>
<div name="second_box" style="display:inline-block;width:100%;margin:0px 0px 0px 0px;padding:1px 2px 1px 2px;">
 <h3 style="text-align:left;">Virtualizace</h3>
<p>Virtualizace infrastruktury umožňuje snížení nákladů na podporu IT systémů, zhodnocení investic do vybavení IT, zefektivnění práce zaměstnanců a procesů.</p>
</div>
</div>
</a>

Answer 1

将两个框保持为“display：inline-block”，垂直对齐为中间。 快速嘲笑这个。如果有效，请告诉我。

<div style="width:515px">
  <div style="width:100px; display:inline-block; vertical-align:middle; margin-right:10px;">
    <img src="http://www.placehold.it/100x100" alt="">
  </div>
  <div style="width:400px; display:inline-block; vertical-align:middle;">
    <h3>Title here</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab neque fuga eligendi, obcaecati ad unde debitis, suscipit sed illum soluta blanditiis aspernatur saepe voluptatum eum quod quae laborum a temporibus.</p>
  </div>
</div>

Answer 2

<a href="#" style="text-decoration:none;">
<div style="border:1px solid grey;">
<p>
<img src="https://rsm.cz/wp-content/uploads/virtu.png" alt="try" style="float:left;" "margin-top:30px>
<h3>Virtualizace</h3>
<p>Virtualizaceinfrastruktury umožňuje snížení nákladů na podporu IT systémů, zhodnocení investic do vybavení IT, zefektivnění práce zaměstnanců a procesů.</p>
</div>  
</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/float float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。