如何更改我的代码以使布局像 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;

}

在这里，我 post link 我拥有和想要的东西：

Current result of mine

Result that I wanna make

Answer 1

您必须通过 CSS.div 创建一个嵌套的 HTML-结构样式，每个 div。

HTML:

<div class="main-wrapper">
  <div class="head-wrapper">
    Lorem Ipsum
    <div class="small-head-wrapper">
      Lorem Ipsum
    </div>
  </div>
  <div class="content-wrapper">
    Your Main Content
  </div>
</div>

CSS:

.main-wrapper {
  border: solid 5px green;
}

.main-wrapper .head-wrapper {
  text-align: right;
  border: solid 5px red;
  padding: 5px;
}

.main-wrapper .head-wrapper .small-head-wrapper {
  border: solid 5px orange;
}

.main-wrapper .content-wrapper {
  border: solid 5px blue;
}

查看：https://jsfiddle.net/zxvvqszx/

Answer 2

只需使用 text-align: right 而不是 float: right 并从 h1 和 h2.

中删除默认的 margin

看看这个片段：

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>

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

How to change my code for making layout like a pictures in css

css

css-float