HTML 负margin 两列列表布局_html/css_WEB-ITnose
程序员文章站
2022-05-12 21:34:19
...
/*首页网格*/.nav-grid {margin:0px;padding:0px;width:100%;list-style: none;display: inline;font-size: 0px;}.nav-grid li {width:45%;padding-bottom:35%;font-size: 15px;position: relative;margin:4% 2% 4% 3%;background-color: #fff;}.nav-grid li a{position: absolute;display: inline-block;height: 100%;width: 100%;text-align: center;vertical-align: middle;}.nav-grid li.col2-top{margin-top:-117% !important; margin-left:52% !important;}.nav-grid li.col2{margin-left:52%;}
效果
整个过程是这样的:
margin-top:-117%;以后,消息和评价位置会上提,覆盖了前面三个,然后增加margin-left 使得水平距离增加,达到两列的效果。
参考http://blog.aizhet.com/web/5156.html
推荐阅读
-
html 三列布局(两列自适应,一列固定宽度)
-
?4种实现多列布局css_html/css_WEB-ITnose
-
css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
-
css两列布局,一边固定宽度,另一边自适应_html/css_WEB-ITnose
-
dl dt dd一行两列并且每一组dl之间自动换行_html/css_WEB-ITnose
-
负margin居中_html/css_WEB-ITnose
-
CSS:三栏布局,两边固定,中间自适应_html/css_WEB-ITnose
-
DIV/CSS 实现三列,左右两列固定,中间一列自适应_html/css_WEB-ITnose
-
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
-
三列中间自适应布局(来自网易)_html/css_WEB-ITnose