2

私は 960 グリッド システムを使用していますが、サポートされていないものをいくつか見つけました。ブループリントへの切り替えを検討しましたが、プロセスの後半で設計に戻る必要があります。とにかく、コードを単純化して、私が経験していることを示しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

3 つの列すべてをカバーするように背景が拡大されるのを確認しようとしています。3 つの列すべてをカバーするように背景を拡張するためにできることはありますか?

4

4 に答える 4

2

この追加のルールをセレクターに追加するだけです:

div.frame {
     overflow:hidden;
}

要素がフレームの外に出る場合を除き、clearfix に依存する必要はありません。また、clear:both を使用した不要なマークアップに依存する必要もありません。

于 2009-09-30T03:24:20.297 に答える
1

clearfixクラスを #bkgに適用する必要があります。

<div class="frame clearfix" id="bkg">
于 2009-09-30T03:23:39.360 に答える
1

やりたいことは「フロートをクリアする」ことです。そこには多くのオプションがあり、簡単なものもあれば、非常に複雑なものもあります。

最も簡単なのは、次のように、最後の列の後にクリア div を追加することです。

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

そして、それはうまくいくはずです。

ここにいくつかの他の方法があります(いくつか、純粋なcss):

于 2009-09-30T03:24:35.647 に答える
1

次のようにフレームをフロートさせることができます。

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

そしてこれはそれを行います。または、「明確な修正」でフレームに追加の要素を配置できます。事前に作成された 960 グリッドは、クラス "clear" を使用してこれを行います。

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>
于 2009-09-30T03:25:32.290 に答える