2

私は 3 列の Web サイトを設計しており、左側の列に特定の人物の情報をプロフィール写真とともに表示したいと考えています。当面の間、HTML で取り込んでおり、左側の列のコードをうまく設計できました。今、私は左側の列にサブディビジョンを作成しようとしています。各ディビジョンは、名前とアカウント情報を持つ人物の写真を反映しています.

#column_left{
   display: inline;
  float: left;
  margin-left: 5px;
}
 #col1 #sub-div{
  width:100%;
  margin:auto;
  border-top:1px #333 solid;
  border-bottom:1px #333 solid;
}
 #col1 #sub-div #div-img { float:left; display:inline; width: 40px; height: 40px;
   } 
 #col1 #sub-div #div-info { float:left; display:inline; width:auto; height:auto; padding: 2px; }

ここでの問題は、2 つの div (div-img と div-info) でさえ sub-div の下にあるため、子 div の高さに応じて sub-div の高さを変更する必要があることです。残念ながら、子 div は正しい順序で配置されていますが、#sub-div の css コードで言及しない限り、親 div には高さがありません。


親が子要素の高さを継承しないのはなぜですか? 私はどこか間違っていますか？

4

1 に答える 1

2

フロートをクリアする必要があります。この行を左の div の一番下に追加して、私の意味を確認してください。

<div style="clear: both"></div>

フロートをクリアする必要がある理由の詳細については、この記事を参照してください。この質問への回答は、より明確な解決策を提供します。

于 2012-04-28T00:03:46.550 に答える