兩列均分排列

2021-09-26 16:28:19 字數 1553 閱讀 1976

一下面**為例:

>

>

>

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 硬幣可排列成以下幾行 因...