Question

我正在尝试使用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>

方法2。

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

这两个代码都有效但我想在列之间创建边框。我应用了border属性但它没有用。上面的代码有一个解决方案来添加边框并与所有浏览器兼容。

已编辑的代码

方法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;

你得到的错误是什么???

无法在网页上添加边框到元素

3 个答案: