css 一行2列各占50% 中间想画条竖线分隔

Question

<div style="float:left;width:50%;background:red;"></div>

<div style="float:right;width:50%;background:red;"></div>
这2个div之间我想加条分隔线 怎么实现呢？

Answer 1

<div width="100%">
    <div style="float:left;height:50px; width:50%;background:red;"></div>
    <div style="float:left;height:50px; width:0px;border-left:1px solid green;border-right:1px solid green"></div>
    <div style="float:left;height:50px; width:49%;background:red;"></div>
</div>

想要两个等宽的话就不能都50%

追问

谢谢，这样子是不行的，因为背景色不能铺满，右边会有白的

追答<div width="100%" >
    <div style="float:left;height:50px; width:50%;background:green;"></div>
    <div style="float:left;height:50px; width:50%;background:green;"></div>
    <div style="position:absolute;z-index:1;width:2px;background:red;height:50px;left:50%" align="center"></div>
</div>

那就只能把分隔线浮起来了，像这样，想搁哪里搁哪里。

追问

谢谢，是个解决方法。

Answer 2

加个右边框
<div style="float:left;width:50%;background:red;border-right:1px solid #fff;"></div>追问

这样是不行的，另一个div会换行的

追答

那就把div宽度调小一点

追问

谢谢你的回答，这种方法我想过，但是调小的话，背景色不能铺满一行，右边会有白的