如何更改我的代码在CSS做布局像一个图片
问题描述：
<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;
}
我在这里张贴的链接的东西我有，我想：
答
只需使用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>
答
你必须创建一个嵌套的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://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –