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

我正在试验css的

float

属性

我试着编码匹配两个浮动div的高度

这两个代码

方法1。

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

a列
a列
b栏

方法2.

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

a列
b栏

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

编辑的代码

方法3.

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

柱形柱形柱形柱形柱形柱形柱形柱形柱形柱形柱形柱形柱
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 acolumn acolumn acolumn acolumn acolumn
b栏

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

在方法1中，我无法应用边界。 任何人都可以为这两个问题提供解决方案。

这应该可以：

border: 2px solid red;

---

您得到的错误是什么？

是的，您可以在columnA和columnB中创建另一个div，宽度为100%和边框

---

如果将边框直接添加到列div中，则35%+2px大于35%，因此与的合计将大于100%。

这可能是解决方案：

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

a列
b栏

您将边框应用于何处？您想将其应用于何处？问题未正确提出，请重新构造并使其更加清晰。您能否解释一下它是如何为2像素的，我添加了1像素的边框；两边都是1px，因此2px添加到了宽度-很好的示例中，但我已经编辑了代码，请查看小提琴