您的位置:博客首页 >> 程序源码 >> css一行两列均分

css一行两列均分

日志编号:229 发表时间: 2018-05-12 01:06:23 关注次数:450
先看代码:
<div id="pop-title">请选择对此招聘信息的操作。</div><div id="pop-opt"><div class="pop-menu"><a href="a.php">操作一</a></div><div class="pop-menu"><a href="b.php>操作二</a></div><!--…此处可以继续重复pop-menu以增加更多行…-->

<div class="pop-menu pop-left"><a href="c.php">操作三</a></div><div class="pop-menu pop-right"><a href="d.php">操作四</a></div></div>


#pop-title{padding:35px 0px;}
#pop-opt{clear:both;line-height:48px;border-top:1px solid #aaa;}
.pop-menu{float:left;width:50%;border:none;border-right:1px solid #aaa;border-bottom:1px solid #aaa;background:#ddd;box-sizing: border-box;}
.pop-menu a{display:block;color:#0091E0;}
.pop-left{border-bottom-left-radius:5px;}
.pop-right{border-bottom-right-radius:5px;}

本例中,点击后在页面中浮动弹出一个框(本例中省略点击弹出浮动代码),此框左下角、右下角为圆角(border-bottom-left-radius:5px;和border-bottom-right-radius:5px),以及一行两列(.pop-menu),各占50%宽度,但因为有border-right:1px solid #aaa的存在,宽度多了一像素(50%×2+1px),使得右侧列会不在右侧,而是换行显示。加上box-sizing:border-box;则完美解决。

box-sizing:border-box 告诉浏览器设置的边框和内边距的值是包含在width内的。也就是说,如果将一个元素的width设为100px,那么这100px包含border和padding,内容区的实际宽度会是width减去border + padding的计算值。

最终效果:
点击新开窗口查看图片
本站不提供讨论功能。
本站所有非新闻类文章均为原创,且禁止转载。
本站为了获得更多流量赚取广告费,难免会有以次充好的文章,望见谅,勿鄙视。