0

css の float プロパティを試しています。

2 つのフローティング div の高さに一致するコードを作成しようとしました。

質問を参考に

フローティング DIV を別のフローティング DIV の高さと一致させるにはどうすればよいですか?

フローティング div との境界線の問題に関する質問

編集済み

2 つの 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 に答える