css - 如何更改我的代码以使布局像 css 中的图片

Question

HTML

    <div id="header"><h1>Scott's Favorite Things</h1>
        <div id="header2"><h2>Cars, Sports, and Music</h2></div>
    </div>

CSS

div#header{
    border:5px;
    border-color: red;
    border-style: solid;

}

h1{
    float:right;
    clear: both;
}
div#header2 h2{
    float: right;
    clear: both;
}
div#header2{
    border:5px;
    border-color: orange;
    border-style: solid;
    margin: 5px;

}

我在这里发布我拥有的和我想要的东西的链接:

Current result of mine

Result that I wanna make

Answer 1

只需使用 text-align: right 而不是 float: right 并从 h1 中移除默认的 margin和 h2。

看看这个片段:

div#header {
  border: 5px;
  border-color: red;
  border-style: solid;
}

div#header h1 { /* Added header to h1 because I dont want to style every h1 */
  text-align: right; /* Changed from float to text-align */
  clear: both;
  margin: 0; /* remove the default margin */
}

div#header2 h2 {
  text-align: right; /* Changed from float to text-align */
  clear: both;
  margin: 0; /* remove the default margin */
}

div#header2 {
  border: 5px;
  border-color: orange;
  border-style: solid;
  margin: 5px;
}

<div id="header">
  <h1>Scott's Favorite Things</h1>
  <div id="header2">
    <h2>Cars, Sports, and Music</h2>
  </div>
</div>