html css Ausrichtung Text, so dass der Text immer auf der rechten Seite des Bildes ist nicht darunter

Question

html css richten Sie Text so, dass Text immer auf der rechten Seite des Bildes nicht darunter ist.Vielen Dank für die Hilfe! Css für img1 ist unten.

<img id="img1" src="../images/1.jpg"> 
<div style="box-shadow: 0 0 15px #666;"> 
<p style="text-align: justify;height: auto;min-height: 280px;font- family: sans-serif,monospace;padding:10px;padding: 10px;box-shadow: 0 0 15px #666;font-size: 20px;color: #000;"> 
    <br>A photovoltaic system for residential, commercial, or industrial energy supply consists of the solar array and a number of components often summarized as the&nbsp;balance of system&nbsp;(BOS). The term originates from the fact that some BOS-components are balancing the power-generating subsystem of the solar array with the power-using side, the load. BOS-components include:<br> 
    Power-conditioning equipment and 
    Structures for mounting, 
    Typically one or more DC to&nbsp;AC&nbsp;power converters, also known as&nbsp;inverters, 
    An energy storage device, 
    A racking system that supports the solar array, 
    Electrical wiring and interconnections, 
    Electrical protection devices and 
    Mounting for other components. 

    Optionally, a balance of system may include any or all of the following:&nbsp; 
    renewable energy credit&nbsp;revenue-grade meter,&nbsp; 
    maximum power point tracker&nbsp;(MPPT),&nbsp; 
    battery&nbsp;system and&nbsp;charger,&nbsp; 
    GPS&nbsp;solar tracker,&nbsp; 
    energy management software,&nbsp; 
    solar irradiance&nbsp;sensors,&nbsp; 
    anemometer, or 
    task-specific accessories 

    designed to meet specialized requirements for a system owner</p> 

#img1 { 
box-shadow: 10px 10px 50px #333; 
float: left; 
height: 280px; 
margin: 0 20px 20px 0; 
max-width: 300px; 
width: 240px; 

}

Answer 1

Sie flex Eigenschaft für diese verwenden können, oder Sie width für Bild-Container und Textcontainer (und natürlich auch einstellen, float Eigenschaft):

.main-container { 
 
    display: flex; 
 
} 
 
p { 
 
    margin-top: 0; 
 
    margin-left: 10px; 
 
}

<div style="box-shadow: 0 0 15px #666;" class="main-container"> 
 
<div class="image"> 
 
    <img src="data:image/jpeg;base64,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" alt="" > 
 
</div> 
 

 
    
 
    
 
    
 
    
 
    <div class="text-container"> 
 
    <p style="text-align: justify;height: auto;min-height: 280px;font- family: sans-serif,monospace;padding:10px;padding: 10px;font-size: 20px;color: #000;"> 
 
A photovoltaic system for residential, commercial, or industrial energy supply consists of the solar array and a number of components often summarized as the&nbsp;balance of system&nbsp;(BOS). The term originates from the fact that some BOS-components are balancing the power-generating subsystem of the solar array with the power-using side, the load. BOS-components include:<br> 
 
    Power-conditioning equipment and 
 
    Structures for mounting, 
 
    Typically one or more DC to&nbsp;AC&nbsp;power converters, also known as&nbsp;inverters, 
 
    An energy storage device, 
 
    A racking system that supports the solar array, 
 
    Electrical wiring and interconnections, 
 
    Electrical protection devices and 
 
    Mounting for other components. 
 

 
    Optionally, a balance of system may include any or all of the following:&nbsp; 
 
    renewable energy credit&nbsp;revenue-grade meter,&nbsp; 
 
    maximum power point tracker&nbsp;(MPPT),&nbsp; 
 
    battery&nbsp;system and&nbsp;charger,&nbsp; 
 
    GPS&nbsp;solar tracker,&nbsp; 
 
    energy management software,&nbsp; 
 
    solar irradiance&nbsp;sensors,&nbsp; 
 
    anemometer, or 
 
    task-specific accessories 
 

 
    designed to meet specialized requirements for a system owner. 
 
    </p> 
 
    </div> 
 
    </div>

Answer 2

Verwenden der CSS-float-Eigenschaft für das Bild und den Wert eingestellt, wie 'links'. Zum Beispiel:

image{ 
     float:left; 
} 

Jetzt wird der Text um das Bild fließen, wie Sie im Bild gezeigt haben.