1

これはフローティングCSSレイアウトについての愚かな疑問のようなものですが、答えはどこにも見つかりません。中央に大きな赤いreactangleがあり、その中に2つの青い正方形があり、長方形の両側に1つずつある、単純なページが必要です。私は次のHTMLコードを持っています：

<body>
  <div id="rectangle">
    <div id="left"></div>
    <div id="right></div>
  </div>
</body>

そして、私はこのcssを持っています：

       #rectangle {
            width: 600px;
            margin: auto;
            padding: 50px;
            background-color: red;
        }
        #left {
            float: left;
            width: 250px;
            height: 250px;
            background-color: blue;
        }
        #right {
            float: right;
            width: 250px;
            height: 250px;
            background-color: blue;
        }

そして、これは機能しません。赤い長方形は、青い正方形が浮いているため、その高さを青い正方形を覆うように調整しないためです。これを解決する唯一の方法は、新しい正方形を追加することです。

<div id="footer"></div>

長方形divの終わりにスタイル付き

clear: both;

これを行うにはもっとエレガントな方法があるはずですよね？

4

2 に答える 2

1

overflow: auto#rectangledivに追加するだけです。

例： http： //jsfiddle.net/ZVJQN/

于 2012-12-08T04:18:04.650 に答える
0

明確なdivを追加

<div id="rectangle">
    <div id="right"></div>
    <div id="left"></div>
      <div class="clear"></div>
  </div>​​​​​​

.clear
{
    clear:both;
}
​
于 2012-12-08T05:02:57.320 に答える