2
A
回答
2
你可以做這樣的事情
div{
display:inline-block;
float:left;
color:#fff;
font-size:40px;
}
.one{
width:150px;
height:200px;
background:red;
}
.two{
width:100px;
height:200px;
background:lightgreen;
}
.three{
width:100px;
height:200px;
}
.four{
width:100px;
height:100px;
background:darkblue;
}
.five{
width:100px;
height:100px;
background:blue;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">
<div class="four">4</div>
<div class="five">5</div>
</div>
1
<!DOCTYPE HTML>
<html>
<head>
<title>Page Layout Sample Div Based</title>
<style>
/*Reset CSS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,
td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body{line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after{ content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0;}
/*Our custom css for this page*/
#container {width:760px;margin:0 auto;}
#head { display:block; width:100%; margin:10px 0; clear:both; height:35px;}
.subhead1 { width:38%; margin-right:2%; height:35px; background-color:#3CF; float:left; }
.subhead2 { width:13%; height:35px; background-color:#3CF; float:left; margin:0 0% 0 2%; }
.content { min-height:100px; clear:both; width:100%; background-color: #3CF; margin-top:20px; text-align:center; font-size:30px; padding-top:100px; }
#footer { height:35px; background-color:#3CF; margin-top:25px; }
</style>
</head>
<body>
<div id="container">
<div id="head">
<div class="subhead1">
</div>
<div class="subhead2">
</div>
<div class="subhead2">
</div>
<div class="subhead2">
</div>
<div class="subhead2">
</div>
</div>
<div class="content">
</div>
<div id="footer">
</div>
<div class="content" style="height:250px;">
</div>
</div>
</body>
</html>
+0
只需將代碼粘貼到文件中並另存爲.html,然後運行該頁面。 – 2015-04-03 07:33:37
相關問題
- 1. CSS如何將包含div列表的div分割成2列
- 2. 如何將一列因子分成多個因子的多列?
- 3. 將一個Div分成兩個css部分?
- 4. 將多個列拆分成多行
- 5. 如何在mysql中將單個行拆分成多個列
- 6. 「Smarty」將div分成多列?
- 7. 如何將2個或更多div放在同一行上? (css)
- 8. CSS多個多列div
- 9. SQL - 將多個列分成若干行
- 10. 如何將一個/ tableofcontents分成兩列或多列?
- 11. 將一個字符串分成多行
- 12. 如何將div div背景分成'n'色帶和CSS
- 13. 將一個列中的多個值拆分爲多個行R
- 14. 如何將一個ItemGroup的Excludes分成多行?
- 15. 我如何將一個字符列分成多個列中的R
- 16. 將多個列和行組合成一個條目
- 17. 將多個列拆分爲多個行
- 18. 將一列分成幾個
- 19. 將行拆分成表的多個行
- 20. 如何將字符串分割成多個列,然後進入多個行
- 21. 將一列分成多列
- 22. CSS將一個響應式圓形div分割成兩半
- 23. 如何將一系列的li包裝成一個div?
- 24. Clojure - 將一個序列分成多個序列
- 25. 將MVC列表分隔爲多個div
- 26. 如何將一個列表分成兩個列?
- 27. CSS間隔多行內的多個div
- 28. 將列表拆分成多個列表
- 29. 如何將多個列值連接成一個列?
- 30. CSS:將一個div爲中心的DIV
應該在 「列」 始終具有相同高度?如果在4個區塊中每個區塊的內容更長/更短,塊會發生什麼?他們製作了什麼內容:圖片和/或文字?編輯:你到目前爲止嘗試了什麼? – FelipeAls 2015-09-17 10:02:29