Два текста текста на одной строке

Question

Я пытаюсь сделать свою страницу пользователя на GitHub. Я планировал, чтобы он вышел с текстом в левой части экрана и текстом в правой части экрана. Код сейчас выглядит следующим образом.

<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> 

Вот как оно выглядит прямо сейчас. https://gyazo.com/cf4eb2c3f0d92eec714c8d926cf38af6

Answer 1

Свойство text-align для содержимого элемента, я думаю, вы пытаетесь заставить элементы плавать с обеих сторон. Также отделите свои элементы, и не все это заголовок, который у них есть специальное назначение 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

Используйте отзывчивый сетку так:

/* 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>