一行两体文本

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

文本对齐属性用于元素的内容，我认为您正在尝试让元素在两边浮动。另外，分离元素，并不是所有的东西都是标题--它们有一个特殊的用途-- 阅读这篇文章。

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

​