关于html布局问题;

图片描述

做移动端,中间有条细线,我是做了一个大盒子宽度给了100%,然后又做了两个小盒子其中左边的盒子49.90%,右边50%,左边的小盒子给了一个右边作为中间的细线,但是感觉电脑看会有间隙,请问有什么完美方法吗?谢谢!

阅读 2.9k
7 个回答

能说下感觉会有间隙的准确含义吗。

不太明白你的意思,不过这个线用伪元素加绝对定位来做,设个居中就行了(left:50%,margin-left负的自身的一半)

两个都给50%的宽度及右边框,然后给最后一个li的边框去掉

li{width:50%;border-right:1px solid #ddd;}
li:last-child{border-right:0;}

这只是部分代码,你懂的

将左右两个div设置50%,再加个box-sizing:border-box

方案1、利用大盒子的背景

background:url(shuxian.png) center center repeat-y

方案2、利用大盒子的伪元素,上面有人说了

方案3、两个小盒子其中一个设置Border不就好了~

方案1比较优雅

如果你只是纠结中间的那条线的间隙,用table不是可以一下子解决你的问题吗?至于个人和单位那些,往格子里面茶插,进行排版即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏