HTML display-inline

Question

Ich versuche dieses Bild zu schreiben:

.

Es gibt eigentlich 3 Elemente - img, h3 & Absatz ... Ich möchte zwei Boxen haben - in der ersten Box wird img vertikal in der Mitte ausgerichtet sein und die zweite Box enthält H3 (align: links) und unter H3 Es gibt einen Absatz.

Mein Code ist wie folgt (ich nur Inline-CSS verwenden kann):

<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

Halten Sie beiden Boxen als "display: inline-block" mit einer vertical-align als Mitte. Schnell verspottet dies. Lass mich wissen ob es funktioniert.

<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 Der Schwimmer CSS Eigenschaft gibt, dass ein Element sollte entlang der linken oder rechten Seite des Containers, in dem Text und die Inline-Elemente von der normalen Strömung und platziert genommen werden wird sich darum wickeln.