- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这些方法中有哪一种是专业网页设计师所偏爱的吗?
Web 浏览器在绘制网站时是否首选这些方法中的任何一种?
这只是个人喜好吗?
我还缺少其他技巧吗?
注意:以上问题是关于设计多列布局
这是我在创建列布局时经常使用的方法,而且看起来效果很好。不过,父级确实会自行崩溃,因此您只需要记住之后 clear:both;
即可。我刚刚发现的另一个缺点是无法垂直对齐文本。
这似乎解决了折叠父级的问题,但添加了空格。
从 html 中删除空格似乎是解决此问题最简单的方法,但如果您对 html 真的很挑剔,则不需要这样做。
似乎与 display:inline;
完全一样。
完美运行。
我确定我遗漏了很多东西,比如某些会破坏布局的异常,但是 display:table-cell;
似乎效果最好,我想我会的开始替换 float:left;
,因为我似乎总是在 clear:both;
上搞砸。我在网络上阅读了很多关于此的文章和博客,但没有一篇明确回答我在布局我的网站时应该使用什么。
最佳答案
您询问的选项中:
float:left;
float
概念在 CSS 规范中设计得很糟糕。不过,我们现在对此无能为力。但重要的是它确实有效,而且适用于所有浏览器(甚至 IE6/7),所以如果你喜欢就使用它吧。如果您使用 :after
选择器来清除 float ,则可能不需要额外的清除标记,但如果您想支持 IE6 或 IE7,则这不是一个选项。
显示:内联;
这不应该用于布局,IE6/7 除外,其中 display:inline; zoom:1
是对 inline-block
损坏支持的后备 hack。
display:inline-block;
这是我最喜欢的选择。它在所有浏览器上都运行良好且一致,但需要注意的是 IE6/7,它支持某些元素。但是请参阅上面的 hacky 解决方案来解决这个问题。
inline-block
的另一个重要警告是,由于内联方面,元素之间的空白被视为与文本单词之间的空白相同,因此您可以在之间出现空白元素。有一些解决方法,但没有一个是理想的。 (最好的是元素之间不要有任何空格)
显示:表格单元格;
table-cell
被设计用于在样式为 table
和 table- 的元素内部的上下文中行
;单独使用 table-cell
不是预期的方法,因此您可能会遇到不同的浏览器以不同方式处理它。您可能错过的其他技巧?是的。
既然你说这是一个多列布局,那么有一个 CSS Columns feature你可能想知道的。然而,它并不是最受支持的功能(IE 即使在 IE9 中也不支持,并且所有其他浏览器都需要供应商前缀),因此您可能不想使用它。但这是另一种选择,你确实问过。
还有 CSS FlexBox 功能,旨在让文本在各个框之间流动。这是一个令人兴奋的功能,它允许进行一些复杂的布局,但这仍在开发中——参见 http://html5please.com/#flexbox
关于html - float :left; vs display:inline; vs display:inline-block; vs display:table-cell;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24867828/
除了 Display.getOrientation() 已弃用之外,Display.getRotation() 和 Display.getOrientation() 之间还有什么区别? 是否都返回等于
我的问题 这些方法中有哪一种是专业网页设计师所偏爱的吗? Web 浏览器在绘制网站时是否首选这些方法中的任何一种? 这只是个人喜好吗? 我还缺少其他技巧吗? 注意:以上问题是关于设计多列布局 floa
我的问题 专业网页设计师是否喜欢这些方法? 网页浏览器在绘制网站时是否首选这些方法? 这只是个人喜好吗? 我还缺少其他技术吗? 注意:以上问题与设计多列布局有关 float :左; http://js
我有一些代码返回 MyTrait 类型的特征对象,这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait,这样我就可以打印对象,并将详细信息委托(delegate)
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而,似乎Display.timerExec只
就像标题所暗示的,有什么区别吗?我当时使用的是pygame.display.flip,我在互联网上看到的是,他们使用pygame.display.update而不是使用flip。哪一个更快? 最佳答案
Sample.this.display() 和 this.display() 哪个更好? class Sample{ void display(){ System.out.println("d
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时,我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗? $(this).bind.('propertychange',
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线 展示 手写 我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
我想知道是否可以在列标记内渲染自定义 html,这是显示表标记的一部分。 例如,我希望我的专栏里面有一些下拉列表? 使用纯 html,如下所示: ... Volvo Saab Me
display.newImage() 和 display.newImageRect() 有什么区别? 哪个更好用? 最佳答案 display.newImage() 的文档具体提到: NOTE: dis
我正在使用纯 JS 和 flexbox 为我的元素创建网格。 元素的某些部分在页面加载时被显示隐藏:无,但单击按钮后它应该在不显示和阻止之间切换。 可悲的是,这完全破坏了 display: flex
我目前正在参加 HTML/CSS 类(class),这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
我理解 style="display: none" 隐藏一个 HTML 元素,而 style="display: block" 显示一个 block 级 HTML 元素。 我看到一些使用 style=
设置控件的样式 display: none 和 display: block 有什么区别? 最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。 假设我只想在 this.state.display 为
我不确定如何命名这个问题,因为我是 Rust 新手,所以请随意提出修改建议。 我有两个结构。一个是 Job 结构,其中包含一些数字,例如作业需要多长时间等。另一个是 JobSequence,其中包含
我不确定如何命名这个问题,因为我是 Rust 新手,所以请随意提出修改建议。 我有两个结构。一个是 Job 结构,其中包含一些数字,例如作业需要多长时间等。另一个是 JobSequence,其中包含
我是一名优秀的程序员,十分优秀!