无法为网页上的元素添加边框

Question

我正在试验 css 的 float 属性。

我已经尝试编写代码匹配两个浮动 div 的高度。

两个代码

方法一。

<div style="overflow: hidden;">
    <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;
       margin-bottom: -500px;border:1px solid White;">column a<br />column a</div>
    <div style="background: red;float: right;width: 35%;
      padding-bottom: 500px;margin-bottom: -500px;border:1px solid White;">column b</div>
</div>

方法二。

<div style="background-color: yellow;">
    <div style="float: left;width: 65%; border:1px solid White;">column a</div>
    <div style="float: right;width: 35%;border:1px solid White;">column b</div>
    <div style="clear: both;"></div>
</div>

这两个代码都可以，但我想跨列创建边框。我应用了边框属性，但它不起作用。上面的代码是否有解决方案来添加边框并与所有浏览器兼容。

编辑的代码

方法3。

<div style="background-color: yellow;">
    <div style="float: left;width: 65%; border-right:1px solid White;">
        column acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
        acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
        acolumn   acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
    </div>
    <div style="float: right;width: 35%;border-right:1px solid White;">column b</div>
    <div style="clear: both;"></div>
</div>

Please see the jsfiddle

具有 b 列的 div 未显示全长边框

在 方法 1 中我无法应用边框。 谁能解决这两个问题。

Answer 1

是的，您可以在 columnA 和 columnB 内创建另一个 div，宽度为 100% 并带有边框。

如果你直接给你的列 div 添加边框，35% + 2px 是超过 35%，所以你的总与会大于 100%。

Answer 2

这可能是解决方案：

<div style="overflow: hidden;position: absolute;right: 5px;left: 5px;">
   <div style="background: blue; float: left;width: 65%; border: 1px solid #ccc;">column a</div>
   <div style="background: red; border: 1px solid #ccc;">column b</div>
</div>

Answer 3

这应该可以工作：

border: 2px solid red;

你得到什么错误？？？