Lokalisieren von Bild- und Textinformationen

Ich habe versucht, ein Bild in der Mitte einer Seite zu finden und zwei Textabschnitte auf seinen Seiten zu finden (links und rechts). Der rechte Textabschnitt befindet sich unter dem Bild und ich kann ihn nicht in der gleichen Zeile finden.Lokalisieren von Bild- und Textinformationen

hier ist mein HTML-Code:

<pre> 
<html> 
    <head> 
     <link rel="stylesheet" href="EXC.css"> 
     <script type="text/javascript" src="EXC.js"></script> 
    </head> 
    <body> 
     <div id="ronimg"> 
      <img src="achivs.png"/> 
      <br> 
      <a href="EXC.html"><button class="button" style="vertical-align:middle"><span> GOBACK </span></button></a> 
     </div> 
     <div id="ronalfor"> 
    THIS IS THE FIRST EXAMPLE 


     </div> 

       <div id="another"> 
    THIS IS THE SECOND EXAMPLE 

     </div> 
    </body> 
</html> 
</pre>

Dies ist der CSS-Code:

<pre> 
#ronimg 
{ 
    margin-top: 30px; 
    float: right; 
    margin-right: 600; 
    clear: none; 
} 
#ronalfor 
{ 
    color: #43acf8; 
    font-style: oblique; 
    margin-top: 30px; 
    border: 5px inset #b1b53e; 
    float:left; 
    width: 500px 

} 

#another 
{ 
    clear: both; 
    color: #43acf8; 
    font-style: oblique; 
    margin-top: 30px; 
    border: 5px inset #b1b53e; 
    float:right; 
    width: 500px 
} 
</pre>

Quelle

2016-07-01 PythIsReal

Flexbox zur Rettung. Ich habe einen flexbox Container um Ihr HTML hinzugefügt, der die untergeordneten Elemente des Containers implizit zu Flex-Childs macht. Dann benutze ich die Eigenschaft order, um die Kinder so einzurichten, wie Sie möchten (Bild in der Mitte mit Textabschnitten, die es flankieren).

.flex-container { 
 
    display: flex; 
 
    margin-top: 30px; 
 
} 
 

 
#ronimg img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
#ronimg { 
 
    order: 1; /* image in the middle */ 
 
} 
 

 
#ronalfor, 
 
#another { 
 
    border: 5px inset #b1b53e; 
 
    font-style: oblique; 
 
    color: #43acf8; 
 
    flex-basis: 200px; /* sets a minimum width for these elements */ 
 
} 
 

 
#ronalfor { 
 
    order: 0; /* section on the left */ 
 
} 
 

 
#another { 
 
    order: 2; /* section on the right */ 
 
}

<div class="flex-container"> 
 

 
    <div id="ronimg"> 
 
    <img src="http://placekitten.com/200/200" /> 
 
    <br> 
 
    <a href="EXC.html"> 
 
     <button class="button" style="vertical-align:middle"><span> GOBACK </span></button> 
 
    </a> 
 
    </div> 
 

 
    <div id="ronalfor"> 
 
    THIS IS THE FIRST EXAMPLE 
 
    </div> 
 

 
    <div id="another"> 
 
    THIS IS THE SECOND EXAMPLE 
 
    </div> 
 

 
</div>

jsfiddle demo

Quelle

2016-07-01 18:45:33

danke, aber ich habe immer noch ein Problem. Jetzt kann ich das Bild in die Mitte und die Abschnitte in den Seiten legen, aber das Bild nimmt den Hauptort der Seite und ich habe einen winzigen Platz in den Seiten zu den Textabschnitten. – PythIsReal

@ user6539484 Ich habe den Beispielcode für Sie geändert und die unnötigen Gleitkommazahlen entfernt. Beachten Sie, wie '# ronalfor' und' # another' eine 'flex-Basis: 200px;' haben. Dies bedeutet, dass diese Seitenelemente eine minimale Breite von 200 Pixel haben, während das andere Flex-Element, '# ronimg', den verbleibenden Platz einnimmt. –

Vielen Dank! Es klappt! aber ich werde lappreciate, wenn Sie mir die Bedeutung des Displays erklären werden: Flex-Befehl und der Bestellbefehl – PythIsReal

die #another { clear:both; } entfernen, dass sie in derselben Zeile zu lokalisieren macht.

Quelle

2016-07-01 18:45:42 vignesh

Lokalisieren von Bild- und Textinformationen

Antwort

Verwandte Themen