0

2つの子要素を含むdivがあります。最初のdivには、ユーザーの操作時にjQueryを介して動的に追加されたコンテンツがあります。2つ目は、親divに含まれないという問題があるテキスト領域です。

<div class="organizer_email_address">something@gmail.com</div>ユーザーがいくつかのオプションを選択してボタンをクリックした後、jQueryを介して追加されます。

clearfixメソッドを試しましたが、親divに2番目の子が完全に含まれることはありません。見て、何が悪かったのか見てください、ありがとう！

HTML

<div id="organizer_email_container">
    <div id="organizer_email_addresses_container">
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</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%;
}

ここに画像の説明を入力してください

4

1 に答える 1

0

#organizer_email_containerにdisplay：noneがあるのはなぜですか？

私には問題ないようです：http：//cl.ly/1c361c0G3r0G1U0p3J0P

-

class="clearfix"テキスト領域のクラスとしてではなく、親コンテナに配置する必要があります。

于 2012-01-17T00:25:09.207 に答える