用CSS解决左右两块布局时，分界线跟随二者中高度大的变化

前两天遇到这样一个问题，左侧是标题栏，右侧是内容栏，tab切换的效果,中间要有一个分界线。

 

刚开始的做法是给的左侧标题栏一个border-right,这样在右侧内容高度小于左侧标题时显示是ok的，如下图：

 

 

但是，在右侧内容宽度大于左侧标题栏的时候，显示效果就不那么友好了：

 

 

如果只给右侧border-left会有类似的问题，就不做赘述。

 

然后，就想要显示二者中高的border,这个属于动态变化的高度，应该要用js来获取二者的高度，然后判断谁的高度大，就显示其border,另一个border隐藏。

 

不过，后来偶然间的想法，用margin-left:-1px;来解决：

 

左侧和右侧同时给左浮动：float:left;并给border:

 

左侧是：border-right:1px solid red;右侧是：border-left:1px solid red;

 

然后在给右侧的：margin-left:-1px;来使二者的border重合在一起，分界线依旧是显示的1px的宽度，这样就可以完美解决显示二者中高度大的border了！