Question

我正在尝试使用css的float属性。

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

参考问题

How might I force a floating DIV to match the height of another floating DIV?

Question on issue of border with floating 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>

Please see the 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>

任何人都可以解决问题。

Answer 1

如果我做对了你想要填充父母的高度，你应该指定父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>

我希望这会有所帮助。

无法在网页中的元素上设置完整边框

1 个答案: