如何更改我的代碼在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和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>

Answer 2

你必須創建一個嵌套的HTML結構的風格通過CSS每個格。

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