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

}

在这里，我发布了指向我想要的东西的链接：

我的当前结果

我想做的结果

Answer 1

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

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>