问题:
My Question(s) 我的问题
Are any of these methods preferred by a professional web designer? 这些方法中的任何一种是专业的网页设计师所偏爱的吗?
Are any of these methods prefereed by a web browser when drawing the website? 绘制网站时,Web浏览器是否会首选这些方法?
Is this all just personal preference? 这仅仅是个人喜好吗?
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/
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