0
私は2つの子要素を含むdivを持っています。 1番目のdivには、ユーザーのやり取りに関するjQueryを介して動的に追加されたコンテンツがあります。 2番目は、親divに含まれていない問題があるテキスト領域です。Clearfixでdivの高さをコンテンツに合わせて拡大しない
<div class="organizer_email_address">[email protected]</div>は、ユーザーがいくつかのオプションを選択してボタンをクリックした後にjQueryによって追加されます。
私はclearfixメソッドを試しましたが、親divに2番目の子が完全に含まれていません。見てみて、何が間違っていたのを見てください、ありがとう！ #organizer_email_container上なし：あなたは、ディスプレイを持っていないのはなぜ
HTML
<div id="organizer_email_container">
<div id="organizer_email_addresses_container">
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
<div class="organizer_email_address">[email protected]</div>
</div>
<textarea id="organizer_email_template" class="clearfix">Some text </textarea>
</div>
CSS
#organizer_email_container {
width: 800px;
min-height: 130px;
height: auto;
margin: 25px auto;
padding: 25px;
background: #FAFAFA;
display: none;
}
#organizer_email_template {
width: 500px;
height: 120px;
background: #F6F6F6;
color: #666;
font-size: 13px;
padding: 7px 10px;
border: 1px solid #B9B9B9;
border-top-color: #A4A4A4;
-moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
clear: both;
}
.organizer_email_address {
background-color: #F3F7FD;
border: solid 1px #BBD8FB;
vertical-align: middle;
font-size: 12px;
color: #2A2A2A;
padding: 2px 5px 2px 7px;
margin: 1px;
float: left;
}
.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%;
}
私の知る限り、親のdivは2番目の子を完全に表示するように正しく拡張されています（FFとChromeの両方）。どのブラウザでテストしていますか？ – techfoobar
私はSafari/MacとChrome/Macでそれをテストしています – Nyxynyx
Safari/Macのスクリーンショットでポストが更新されました – Nyxynyx