一下面**為例:
>
>
>
rip van winkleh1
>
>
many years ago, at the foothills of the ....kind neighbour, ready to help anyone. p
>
src=
"head1.png"
alt="picture of rip van winkle"
>
article
>
>
>
robinson crusoeh1
>
>
as rip and his companion reached them... glasses and made rip drink it.p
>
src=
"head2.png"
alt="picture of rip van winkle"
>
article
>
section
>
首先將頁面的margin和padding清零,並給section設定乙個背景顏色,這樣能清晰的看到布局的範圍。
*
section
接著,設定article為左浮動,再設定寬度50%。這樣頁面就會自動排列為兩行。
article
這樣設定後發現以前設定的樣式都不翼而飛了???根據文件流原理,在section中原本有兩個article元素,這就形成了section的內部文件流,而section的高度也正是由這兩個articlt的高度得來。當article加一浮動時,section內部的文件都被抽空,這樣他就失去了自己的高度。
可以在section中新增乙個不浮動的子元素來解決問題:
section::after
這樣會形成一種block formatting context(bfc)機制:
為 section 增加40畫素的內邊距,為了不改變原來的980畫素這一整體寬度,設定其 box-sizing屬性為border-box。而article的寬度使用的是百分比的表示方式,所以在設定padding時不用擔心內部空間過小從而影響兩邊的排列。
對於article,設定其寬度為49%,這樣會留出2%作為空隙。
section
article
設定 < p >段落字型大小和顏色;標題的字型大小和其下邊距,讓其與段落文字分開更清晰;最後,設定標題和段落共同的寬度、左邊距、字型樣式。
p
h1h1, p
最後,把向上移動。設定 img 的父元素 article 為相對定位,設定 img 為絕對定位,再讓 top 為 0 即可。
article
img
hdu 1716 排列2 排列組合
問題描述 ray又對數字的列產生了興趣 現有四張卡片,用這四張卡片能排列出很多不同的4位數,要求按從小到大的順序輸出這些4位數 input 每組資料佔一行,代表四張卡片上的數字 0 數字 9 如果四張卡片都是0,則輸入結束。output 對每組卡片按從小到大的順序輸出所有能由這四張卡片組成的4位數,...
197 排列序號
是 這道題採取暴力解法會超時,應當對於原陣列的每乙個位置找到其後有多少個數比它小,然後再相加這些數與對應的權的成績。class solution long long ans 1,fac 1,cc 1 for int i len 2 i 0 i ans fac cc c i return ans 注意...
441 排列硬幣
你總共有 n 枚硬幣,你需要將它們擺成乙個階梯形狀,第 k 行就必須正好有 k 枚硬幣。給定乙個數字 n,找出可形成完整階梯行的總行數。n 是乙個非負整數,並且在32位有符號整型的範圍內。示例 1 n 5 硬幣可排列成以下幾行 因為第三行不完整,所以返回2.示例 2 n 8 硬幣可排列成以下幾行 因...