2

ビジュアルはこちら

写真からわかるように、親コンテナーが子コンテナーに合わせて拡張されていません。ページ コンテナー (#contain) は、実際にはキッチンの写真の左下隅で停止します。子コンテナー (#zone2) は明らかに親コンテナー (#contain) の外にあふれています。(#contain) を (#zone2) に合わせて自動的に拡張できるようにしたいと考えています。CSS は次のとおりです。

#contain {
    position: relative;
    width: 100%;
    margin: 0 px;
    background: #E3DCCC;
    z-index: 0;
}

#zone1 {
    width: 100%;
    height: 850px;
    background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center   top;
    position: absolute;
    z-index: -1;
}
#head {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 330px;
}

#head img {
    max-width: auto;
    height: auto;
}

#zone2 {
    position: relative;
    overflow: hidden;
    padding: 3px;
    top: 360px;
    float: right;
    right: 15px;
    width: 53%;
    height: auto;
    border: 4px solid #715E40;
    background-color: white;
}
#zone2 img {
      max-width:100%;
      height: auto;
      float:left;
      margin: 5px;
}

#zone3 {
    position: relative;
    top: 710px;
    left: 15px;
    float: left;
    height: 340px;
    width: 38%;
    border: 4px solid #715E40;
    background-color: white;
}
4

3 に答える 3

0

私はあなたの問題を複製し、これでそれを解決することができました：あなたはそれを試してみたいかもしれません。少し奇妙に見えるので、必要に応じてクラスを作成してください。私はそれがどこに置かれるかについてもっと心配しています。

コードの行のすぐ下に、3行目を追加します。それだけで完了です。ポジショニングについての詳細に注意してください。

<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />

3行目を追加するだけです。

スタイルの1つを変更するだけです。

#zoneclear {   
    clear: both;
    float:none;
    display:block;  
    height: 30px;
    position: relative;
}

[編集]コードには、Google Chromeには存在しないFirefoxの重大なバグがあります（相対的な位置付けのために以前にテストしました。そのため、＃zoneclearスタイルを変更して修正しました。テストが必要になる場合があります。このハックのような他のブラウザ。

お役に立てば幸いです

于 2013-03-07T21:33:35.150 に答える
0

さらに画像を追加して垂直方向#zone2に拡張することをテストしました。#containどういうわけか#zone2、親の合計の高さに追加されていないパディングまたはマージンを持つ要素を取得しました。

先に進むために簡単な修正が必要な場合は、 に追加margin-bottom: 30px;して#zone2ください。

于 2013-03-07T21:31:05.653 に答える
0

これはフロートの問題です。従来の CSS クリア フィックスを #zone2 のコンテナーに追加してみてください。

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

これを :after 疑似セレクターに入れてください。そうしないと、うまくいきません。浮動要素は、通常のドキュメント フローの外側に存在します。これが、コンテナーがそれらを含むように拡張されない理由です。クリア フィックスはフロートを強制的にクリアし、コンテナがこの要素の下部に展開します。

于 2013-03-07T20:42:37.280 に答える