要實現的效果如上.3個塊級元素div,中間那個居中,其他2個靠邊.(只考慮ie8+)
對於居中的問題,有很多,包括上下左右正居中,緊貼頂部居中等.
可以嘗試先布局:
demo1
demo2
demo3
對於中間那個div可以直接寫:
#div2
#div1
#div3
#div2
然而發現效果還是不對,可以看到如下:
發現div3跟div1,div2不在同行,問題出在哪呢?
其實還是文件流的布局上.即div1,div2,div3加入的順序是要注意的.雖然div1,div3已是float,脫離文件流,不佔文件流空間.但div2還是塊級元素,依然會佔一行.
故需要修改html div引入順序.
demo1
demo3
demo2
所以這個問題,由點及面來看,還是涉及到了很多知識點,如:html文件流,塊級元素和行內元素(及其區別),盒模型.
css中塊級元素同行顯示
實現方法大概有兩種 1.設定float屬性 將塊級元素的css格式設定為float left right,比如,有兩個panel,panela和panelb,想要使其位於同一行,只需要設定a的css格式為float left right即可。注意 只是設定a的float屬性哦,若設定了b的float...
CSS的元素分類 塊級元素 行內元素 行內塊元素
在面試中有遇到一些很簡單的問題,但是比較容易忽略掉一部分,或者算是知識盲區吧 和面試官簡單的寒暄,進入正題,說說你對css元素分類的看法?根據自己認識的水平大概的講了分類,具體哪些元素,但是感覺少了點什麼又說不上來。回來查詢之後特此把知識點記錄以下 1.塊級元素 如 div,h1 h6,p,ul,l...
行內元素和塊級元素的區別,請分別寫出五個元素
1.行內元素與塊級元素直觀上的區別 二 行內元素與塊級元素的三個區別 行內元素會在一條直線上排列 預設寬度只與內容有關 都是同一行的,水平方向排列。2.塊級元素各佔據一行 預設寬度是它本身父容器的100 和父元素的寬度一致 與內容無關 垂直方向排列。塊級元素從新行開始,結束接著乙個斷行。3.塊級元素...