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

Question

我正在试验 css 的 float 属性。

我尝试编写匹配两个 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>

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

编辑代码

方法三。

<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%。