HTML、CSS知识点,面试开发都会需要--No.4 内容布局
No.4 内容布局
1.列举场景
同一行布局三个元素。三个元素等比显示,并且其他元素不会围绕这三个元素。如下要让下面的三个column等比显示在一行:
2.通过Float属性实现
(1)float:left, 对于块级别的div可设置float:left让几个元素同行显示。但需要阻止其他元素追尾。
(2)解决追尾方案一:在Column3的后面添加一个div,并设置css属性:clear:both。这个大家应该都很熟悉。
(3)解决追尾方案二:设置容器的公共class样式,设置class的before和after伪类,但需要考虑兼容性。所以完整的解决方案代码如下:
.group:before,
.group:after{
content: "";
display:table;
}
.group:after{
clear:both;
}
.group{
clear:both;
}
3.通过设置display为inline-block实现
(1)display为inline-block的元素不会占满一行,所以设置三个column的display为inline-block可是三个元素同行显示。但linline-block元素之间会存在空白,需要解决存在的空白。
(2)解决空白方案一:把每一个新的inline-block元素的闭环tag和下一个开环tag放在一行。代码如下:
<section>
...
</section><section>
...
</section><section>
...
</section>
(3)解决空白方案二:在闭环tag的后面添加一个打开的注释标签,在下一个开环tag的后面添加一个关闭注释的标签。代码如下:
<header>...</header>
<section>
...
</section><!--
--><section>
...
</section><!--
--><section>
...
</section>
<footer>...</footer>