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屬性指定的元素應該從正常流中取出並沿着它的容器的左側或右側，其中文本和內聯元素放置將環繞它。