0

我正在试验 css 的 float 属性。

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

参考问题

如何强制浮动 DIV 匹配另一个浮动 DIV 的高度?

关于浮动div边界问题的问题

已编辑

我希望根据两个 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>

请参阅 jsfiddle

b 列的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 acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
     acolumn  acolumn acolumn acolumn acolumn acolumn acolumn acolumn a
   </div>
   <div style="background: red;float: right;width: 35%;
  padding-bottom: 500px;margin-bottom: -500px;border:1px solid White;">column b
   </div>
</div>

任何人都可以为这些问题提供解决方案。

4

1 回答 1

0

如果我做对了,您想填写父母的高度来做到这一点,您应该为父母 div 指定高度。

Round columns without width adjusted and border divs inserted
<div style="background-color: yellow; height: 500px;">
    <div style="float: left;width: 65%; height: 100%;">
        <div style="width: 100%; height: 100%;border: 1px solid red;">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 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 acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn a</div></div>
  <div style="float: right;width: 35%; height: 100%;">
      <div style="width: 100%; height: 100%;border: 1px solid red;">column a</div></div>
  <div style="clear: both;"></div>
</div>
​

我希望这有帮助。

于 2012-07-19T13:18:32.180 回答