29

左、中央、右の 3 つの div 要素があります。左右固定、フローティング。私が欲しいのは、中間の div がそれらの間のギャップを埋めることです。

これは私のコードです:

<!DOCTYPE html>
<html>
<head>
   <style>
      * {border: dotted 1px red;}
      #left {
         width: 200px;
         float: left;
      }
      #middle {
         float: left;
      }
      #right {
         width: 200px;
         float: right;
      }
   </style>
</head>
<body>
   <div id="left"  >  left   </div>
   <div id="middle">  middle </div>
   <div id="right" >  right  </div>
</body>
</html>

これを行う方法についてのアイデアはありますか？さまざまな解決策を試しましたが、やりたいことができませんでした。

4

2 に答える 2

76

重要なのは、html をmiddle最後に再構築し、 から を削除しfloatてmiddleに置き換えることoverflow: hiddenです。

フィドルの例を表示します。

HTML

<div id="left"  >  left   </div>
<div id="right" >  right  </div>
<div id="middle">  middle </div>

CSS

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}
于 2013-03-31T00:01:16.937 に答える