0

ナビゲーションバーで選択されたタブに基づいてコンテンツの長さが異なるこの中央の div がありました。コンテンツの長さに応じて調整されることを期待して、divに最小の高さを与えました。また、height プロパティを auto に設定しました。これはうまくいきませんでした。しかし、overflow:hidden を追加することで問題は解決しました。これが実際にどのように機能したかを本当に理解できません。

どんな助けでも大歓迎です

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

編集: 私の問題を正しく説明できなかった場合はお詫び申し上げます。overflow:hidden なしで起こっていたのは、中央の div 内のコンテンツが div の外に流れていたことですが、それを使用した後、中央の div の高さがコンテンツに合わせて調整されたようです。関連する CSS とマークアップは次のとおりです。

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
/*border: 1px solid #C6C6C6;*/
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

.main_content{
width: inherit;
height: inherit;
}

.main_content img{
max-width: 100%;
height: auto;
}

#content1{
margin: 20px;
}

.img{
width: 25%;
height: 25%;
margin: 20px;
float: left;
}

.desc{
width: 65%;
height: auto;
min-height: 650px;
float: left;
overflow: hidden;
margin-top: 20px;
font-family: 'Aleor';
font-size: 100%;
}

.desc p:last-child{
padding-bottom: 30px;
}

HTML

<div class="central">
    <section id="content1">
        <div class="main_content">
            <article class="img"><img src="profile.jpg"/></article>
            <section class="desc">
                <p>The content</p>
            </section>
        </div>
    </section>
</div>
4

2 に答える 2

1

これにもコメント。

問題の原因となる浮動要素がある可能性があります。を使用して修正できますoverflow: auto。

それを利用することで、コンテナはその中に要素があることを認識します。

アップデート

フロートされた子がどのように機能するかについては、デモを確認してください。overflow:auto

于 2013-08-22T16:19:31.103 に答える