2

頻繁に発生する繰り返しの問題について助けが必要です。インラインに配置された 3 つのセクションで構成されるヘッダーを作成したいと考えています。次の css コードを使用してインラインで表示します display: inline & float: left。問題は、ブラウザー ウィンドウのサイズを変更すると、最後の div が押し下げられ、インラインで表示されないことです。うるさいように聞こえるかもしれませんが、訪問者がモニター画面を変更するときにデザインが歪むことは望ましくありません。以下で作業しているhtmlおよびcssコードを以下に提供しました。うまくいけば、私はこれを十分に説明しました。前もって感謝します。

HTML

<div class="masthead-wrapper">
&nbsp;
</div>

<div class="searchbar-wrapper">
&nbsp;
</div>

<div class="profile-menu-wrapper">
&nbsp;
</div>

CSS

#Header {
  display: block;
  width: 100%;
  height: 80px;
  background: #C0C0C0;
}
.masthead-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #3b5998;
}
.searchbar-wrapper {
  display: inline;
  float: left;
  width: 560px;
  height: 80px;
  background: #FF0000;
}
.profile-menu-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #00FF00;
}
4

2 に答える 2

2

次の css コードを使用してインラインで表示します: display: inline&float: left

さておき...インラインで表示するのではなく、実際に要素をフローティングしています。display:inlinefloat 要素は暗黙的にblockとして表示されるため、このルールはここでは関係ありません。

しかし、とにかく、セクションがすべて固定幅 (200 + 560 + 200 = 960px) であるため、ブラウザー ウィンドウがこの幅 (960px とページの余白のためにもう少し) 近くまで縮小されると、デザインはうまくいきます。壊れる - コンテナがラップします。

これらのコンテナーを固定幅にして、小さなブラウザー ウィンドウで単純にトリミングしたい場合は、おそらくoverflow:hidden#Header に追加できます。少なくとも、#Header の高さが 80px を超えて押し下げられることはありません (これは、発生していると思われる問題です)。ただし、小さい画面ではコンテンツが隠されます。

または、すべての列コンテナーを動的にし、パーセンテージ幅を指定して、使用可能な幅で柔軟にします。例えば。それぞれ20%、60%、20%。ただし、一部のウィンドウ サイズでは、幅が小さすぎたり大きすぎたりする場合があります。min-widthこれを制限するためにand max-width(絶対量) を追加できます。しかし、狭い幅height:80pxでは十分ではないのでmin-height:80px、#Header を柔軟に設計できる場合は、おそらくより適切でしょうか?

于 2012-09-09T09:40:13.710 に答える
0

パーセンテージでは、列にパディングがないことを確認してください。パディングにより幅が追加されます。ヘッダーには position:fixed を使用でき、IE6 および 7 では position: absolute ( position :fixed ) を使用できません。列については、残りのコンテンツを問題なく配置するのに役立つ clearfix メソッドを追加できます。HTML は次のようになります。

<div id="header" class="clearfix">
  <div id="col01">Column 01</div>
  <div id="col02">Column 02</div>
  <div id="col03">Colunm 03</div>
</div>

そしてCSS：

    #header {
    position: fixed;
    height:80px;
    width:100%;
    }

    #col01,
    #col02,
    #col03 {
    float:left;
    }
    #col01,
    #col03 {
    width:20%;
    }
    #col02 {
    width:60%;
    }
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }


* html .clearfix {
    height: 1%;
}

それがあなたを助けてくれることを願っています:-)

于 2012-09-10T18:48:38.140 に答える