0

我正在试验floatCSS 的属性。

我试图编码匹配两个浮动 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>

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

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

编辑代码

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

请参阅 jsfiddle

b 列的div未显示全长边框

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

4

3 回答 3

1

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

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

于 2012-07-19T12:09:52.433 回答
1

这可能是解决方案：

<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>
于 2012-07-19T12:18:45.497 回答
0

这应该只是工作：

border: 2px solid red;

你得到什么错误？？？

于 2012-07-19T12:07:56.380 回答