HTML 디스플레이 인라인

Question

이 그림을 작성하려고합니다 :

.

실제로 3 개의 요소가 있습니다 - img, h3 & 단락 ... 두 상자가 있어야합니다 - 첫 번째 상자에는 중간에 두 번째 상자가 세로로 정렬되고 두 번째 상자에는 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

이 같은 두 상자를 보관하십시오. 빨리 조롱했습니다. 작동하는지 알려주세요.

<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 속성은 요소가 정상 유동에서 촬영 및 용기의 좌측 또는 우측, 텍스트와 인라인 요소 따라 배치되도록 지정 그걸 감싸 죠.