首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >负margin在页面布局中的应用

负margin在页面布局中的应用

作者头像
OECOM
发布2020-07-01 17:24:27
1K0
发布2020-07-01 17:24:27
举报
文章被收录于专栏:OECOMOECOM

2017-11-07 07:23:04

两栏布局

在页面中经常会遇到两列的情况,比如说左侧栏固定宽度,右侧栏自适应宽度,此时可以用flex布局的方式,但是这种方式在ie8上不兼容,但是也可以用table。这里我们来说用margin的负值来实现两栏布局。

<div>
	<div style="height: 400px;float: left;width: 100%;background: green;">
		<div style="margin-left: 200px;">sdfsfdfsd</div>
	</div>
	<div style="height: 400px;float: left;width: 200px;background: red;margin-left: -100%;"></div>
</div>

如上代码,即可实现一个两列的布局,具体效果就是下图

负margin在页面布局中的应用
负margin在页面布局中的应用

去除列表右边距

项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:

html:

<div id="test">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </div>

css

 body,ul,li{ padding:0; margin:0;}
    ul,li{ list-style:none;}
    #test{
        width:320px;
        height:210px;
        background:#CCC;
    }
    #test ul{
        margin-right:-10px;
        zoom:1;
    }
    #test ul li{
        width:100px;
        height:100px;
        background:#F60;
        margin-right:10px;
        margin-bottom:10px;
        float:left;
    }

具体实现效果

负margin在页面布局中的应用
负margin在页面布局中的应用

去除列表最后一个li元素的border-bottom

列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

HTML

<ul id="test">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>

CSS

 body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }

具体实现效果

负margin在页面布局中的应用
负margin在页面布局中的应用
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-11-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 两栏布局
  • 去除列表右边距
  • 去除列表最后一个li元素的border-bottom
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档