HTML显示内嵌

Question

我想写这张图片：

。

实际上有3个元素 - img，h3 &段落...我想要两个盒子 - 在第一个盒子中将img在中间垂直对齐，第二个盒子包含H3（align：left）和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

保持两个框为“显示：内联块”具有垂直对准作为中间。 快速嘲笑这一点。让我知道它是否有效。

<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 浮子CSS属性指定的元素应该从正常流中取出并沿着它的容器的左侧或右侧，其中文本和内联元素放置将环绕它。