0

私はfloatcssのプロパティを実験しています。

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

2つのコード

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

両方のコードは機能しますが、列に境界線を作成したいです。境界線プロパティを適用しましたが、機能しませんでした。境界線を追加してすべてのブラウザと互換性を持たせるための上記のコードの解決策はありますか。

編集されたコード

方法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の中に、幅が100％で境界線のある別のdivを作成できます。

列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 に答える