CSS布局之品字布局_html/css_WEB-ITnose
程序员文章站
2022-05-21 10:18:30
...
最近有同学面试被问到关于品字布局的问题。虽然我觉得这种布局确实比较难看,应该也不会用到,但是既然有人问到,我还是自己尝试写了一下品字布局。其实很简单。
先看效果:
第一种:
第二种:
第一种:
其实实现方法很简单,基本思路:
(1)三块高宽是确定的;
(2)上面那块用margin: 0 auto;居中;
(3)下面两块用float或者inline-block不换行;
(4)用margin调整位置使他们居中。
inline方法代码如下:
上右左
这里首先用margin-left: 50%,让下面两块的左侧到中间位置。然后再对右下角那块用margin-left,值是负的两倍宽度。就可以把它移动到左下角。因此第二个div是右下的,第三个是左下的,需要换一下。
还有一个小技巧,使用inline-block会有小的间隙,可以使用去除inline-block元素间间距的N种方法来解决。
float方式:
上右左
和inline-block方式大同小异,就不再赘述。
还有全屏的品字布局,就更加简单,基本思路是上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可。
这里贴出一种方法:
上右左
推荐阅读
-
html5+css3之CSS中的布局与Header的实现
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
?4种实现多列布局css_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
漫谈css布局_html/css_WEB-ITnose
-
HTML??UL+CSS布局_html/css_WEB-ITnose
-
HTML??使用表格就行页面布局_html/css_WEB-ITnose
-
css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
-
背景图片文字布局问题_html/css_WEB-ITnose
-
响应式布局及bootstrap(实例)_html/css_WEB-ITnose