float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

問題:

My Question(s) 我的問題

  1. Are any of these methods preferred by a professional web designer? 這些方法中的任何一種是專業的網頁設計師所偏愛的嗎?

  2. Are any of these methods prefereed by a web browser when drawing the website? 繪製網站時,Web瀏覽器是否會首選這些方法?

  3. Is this all just personal preference? 這僅僅是個人喜好嗎?

  4. Are there other techniques I'm missing? 我還缺少其他技巧嗎?

Note: Above questions are in regards to designing a multi-column layout 注意:以上問題與設計多列布局有關


float:left; 向左飄浮;

http://jsfiddle.net/CDe6a/ http://jsfiddle.net/CDe6a/

浮動:左圖

This is the method I always use when creating column layouts, and it seems to work just fine. 這是我在創建列布局時始終使用的方法,並且似乎工作得很好。 The parent does collapse on itself though, so you just need to remember to clear:both; 父母確實會自己崩潰,所以你只需要記住clear:both; afterwards. 然後。 Another con that I just found was the inability to align text vertically. 我剛剛發現的另一個缺點是無法垂直對齊文本。

display:inline; 顯示:內聯;

This seems to correct the problem of the collapsing parent, but adds whitespace. 這似乎可以解決父項崩潰的問題,但是增加了空格。

http://jsfiddle.net/CDe6a/1/ http://jsfiddle.net/CDe6a/1/

顯示:在線圖像

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html. 從html刪除空格似乎是解決此問題的最簡單方法,但是如果您對HTML確實很挑剔,則不希望這樣做。

http://jsfiddle.net/CDe6a/2/ http://jsfiddle.net/CDe6a/2/

沒有html空格圖片

display:inline-block; 顯示:行內塊;

Seems to behave exactly like display:inline; 似乎表現得完全像display:inline; .

http://jsfiddle.net/CDe6a/3/ http://jsfiddle.net/CDe6a/3/

顯示:內嵌圖片

display:table-cell; 顯示:表格單元格;

http://jsfiddle.net/CDe6a/4/ http://jsfiddle.net/CDe6a/4/

顯示:表格單元格圖像

Works perfect. 完美的作品。

My thoughts: 我的想法:

I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; 我確定我遺漏了很多東西,例如某些會破壞佈局的異常,但是display:table-cell; seems to work the best, and I think I will start replacing float:left; 似乎效果最好,我想我將開始替換float:left; as I always seem to mess up on clear:both; 就像我總是一團糟一樣clear:both; . I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website. 我已經在網絡上閱讀了許多有關此的文章和博客,但沒有一個給我明確的答案,我應該在佈置網站時使用什麼。


解決方案:

參考一: https://en.stackoom.com/question/nX6u
參考二: https://stackoom.com/question/nX6u
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章