1

Web ページのレイアウトを作成しようとしていて、この問題に遭遇しました。

<div id="pageWrapper">
  <div id="pageHeader">
  </div><!-- end of pageHeader -->

  <div id="navTab">
    <div class="navButtons"></div>
  </div><!-- end of navTab -->
</div><!-- end of wrapper -->

そして私のCSSは次のようになります

#pageWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#pageHeader {
  width:100%;
  height:7%;
  color:#DADADA;
  float:left; 
}

#navTab {
  width:100%;
  height:6%;
  background-color:#000000;
  float:left;
}

.navButtons{
  width:100px;
  height:90%;
  margin:5%;
  background-color:#ffffff;
  float:left;
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
}

流動的なレイアウトを作成しようとしていて、幅の.navButtons内側に divを追加しようとしていますが、CSS でパラメーターを指定すると、div 内に収まりません。ここで何が間違っていますか? #navTab??

jsbin リンクを追加しますhttp://jsbin.com/ezeqec/1/edit

4

4 に答える 4

1

うーん、それからそれを削除してみてmargin: 5%ください.navButtons。水平方向のマージンが必要な場合は、margin: 0 5%;

それ以外の場合、その垂直マージンも必要な場合は、次のようにします。

<div id="navTab">
<div class="navButtons"></div>
<div class="clearFloat"></div> <!-- added this -->
</div><!-- end of navTab -->

CSSの変更：

.navButtons {
    width:100px;
    height:90px; /* in pixels instead of % */
    margin:5%;
    background-color:#ffffff;
}

#navTab {
        width:100px;
    height:90%; /* this should be in pixels, if you want to give % for navButtons */
    margin:5%;
    background-color:#ffffff;
}

％で指定する場合heightは、親要素の高さを固定する必要があります。height親要素の％またはを含めることはできませんauto。

于 2013-02-05T10:58:29.473 に答える
0

navTab 以外のすべてのステートメント 'float' を削除します。

于 2013-02-05T09:13:37.930 に答える
0

navTabフローティングされている child を含めたい場合navButtonsは、CSS を追加して、要素を強制的に展開する必要があります。一番簡単なのはoverflow:auto.

基本的な問題は、要素をフローティングすると、通常のドキュメント フローから除外されるため、高さ/幅の計算に考慮されないことです。

于 2013-02-05T09:16:26.850 に答える
0

.clearfix を pageWrapper に割り当てると、ラッパーが崩壊するのを防ぐことができます。

.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
.clearfix { 
zoom:1; 
}

この記事の最初の部分はフローティング要素の復習ですが、ページの後半付近には、すべての子要素がフローティングされているときに要素が折りたたまれないようにするための優れたテクニックがいくつかあります。

于 2013-02-05T09:18:42.663 に答える