Zwei Textstellen in einer Zeile

Question

Ich versuche, meine Benutzer-Seite auf GitHub zu machen. Ich plante, dass es Text auf der linken Seite des Bildschirms und Text auf der rechten Seite des Bildschirms hatte. Der Code sieht jetzt so aus.

<h2> 
    <div style="text-align: left;">About Me</div> 
    <div style="text-align: right;">My Stuff</div> 
</h2> 
<h3> 
    <div style="text-align: left;">Name: Jet "Humding3r" Geronimo<br /> 
            Age: 11<br /> 
            Hobbies: Coding, Gaming, Music</div> 
</h3> 
<h3><div style="text-align: right;"><a href="https://github.com/Humding3r/number-guessing-game">Number Guessing Game</a></div> 

So sieht es jetzt aus. https://gyazo.com/cf4eb2c3f0d92eec714c8d926cf38af6

Answer 1

Die text-align-Eigenschaft ist für den Inhalt des Elements, ich denke, Sie versuchen, die Elemente auf beiden Seiten zu schweben. Trennen Sie auch Ihre Elemente, und nicht alles ist eine Überschrift sie haben einen speziellen Zweck read this.

<div id="left-panel" style="float:left;text-align:left"> 
    <h2>About Me</h2> 
    <div> 
    Name: Jet "Humding3r" Geronimo<br /> 
    Age: 11<br /> 
    Hobbies: Coding, Gaming, Music</div> 
    </div> 
</div> 
<div id="right-panel" style="float:right;text-align:right;"> 
    <h2>My Stuff</h2> 
    <div> 
    <a href="https://github.com/Humding3r/number-guessing-game">Number Guessing Game</a> 
    </div> 
</div> 

Answer 2

eine reaktions Gitter wie folgt verwenden:

/* SECTIONS */ 
 

 
.section { 
 
    clear: both; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 

 
/* COLUMN SETUP */ 
 

 
.col { 
 
    display: block; 
 
    float: left; 
 
    margin: 1% 0 1% 1.6%; 
 
} 
 

 
.col:first-child { 
 
    margin-left: 0; 
 
} 
 

 

 
/* GROUPING */ 
 

 
.group:before, 
 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.group:after { 
 
    clear: both; 
 
} 
 

 
.group { 
 
    zoom: 1; 
 
    /* For IE 6/7 */ 
 
} 
 

 

 
/* GRID OF TWO */ 
 

 
.span_2_of_2 { 
 
    width: 100%; 
 
} 
 

 
.span_1_of_2 { 
 
    width: 49.2%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
    .col { 
 
    margin: 1% 0 1% 0%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .span_2_of_2, 
 
    .span_1_of_2 { 
 
    width: 100%; 
 
    } 
 
}

<div class="section group"> 
 
    <div class="col span_1_of_2"> 
 
    <b>About Me</b> 
 
    <p>Name: Jet "Humding3r" Geronimo 
 
     <br /> Age: 11</p> 
 
    </div> 
 

 
    <div class="col span_1_of_2"> 
 
    <b>My Stuff</b> 
 
    <p>Hobbies: Coding, Gaming, Music</p> 
 
    </div> 
 
</div>