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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章