Comment changer mon code pour faire la mise en page comme un images dans 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; 

} 

Ici, je posterai le lien avec les choses que je dois et je veux :

Current result of mine

Answer 1

Il suffit d'utiliser text-align: right au lieu de float: right et enlever la valeur par défaut margin de h1 et h2.

Regardez cet extrait:

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

Vous devez créer une structure HTML imbriquée en divisant chaque style via CSS.

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

Le 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; 
} 

Check it out: https://jsfiddle.net/zxvvqszx/