3

私はプロジェクトのチャット モジュールに取り組んでいます。css 以外はすべて機能しています。チャット要素用のグローバル コンテナーがあり、この div の位置は固定されています。内部には 2 つの div があります。1 つはチャット ウィンドウ用で、もう 1 つは連絡先リスト用です。チャット ウィンドウと連絡先リストの両方が右側にフローティングしており、タイトルをクリックして「最小化」できます (これにより本文が非表示になり、終了するだけです)。タイトルが表示されます）。問題は、div の 1 つだけを最小化すると、他の div と同じ高さで上部に残ることです (画像を参照)。

これは私が得ているものです:

右側のコンテナは div の上部に残ります

これは私が欲しいものです:

ここに画像の説明を入力

関連コード:

<body>
    <!--boring code-->

    <div class="chat_container">
        <div class="contactos show">
            <div class="titulo">contactos</div>
            <div class="container">
                <div class="contacto online" id="contacto_3">juan an orozco</div>
            </div>
        </div>
        <div class="chat_wdow_container">
            <div class="chat_wdow " id="chat_wdow_3">
                <div class="title_area">juan an orozco</div>
                <div class="container">
                    <div class="msg_area"></div>
                    <input type="text" name="msg">
                </div>
            </div>
        </div>
    </div>
</body>

とcss

div.chat_container
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px dashed gold;
}

div.chat_container > div
{
    float: right;
}

div.chat_container div.contactos div.titulo
{
    text-align: center;
}


div.chat_container div.contactos
{
    min-width: 150px;
    background: dimgrey;
    padding: 5px;
    border-radius: 10px 10px 0 0px;
}

div.chat_container div.contactos div.container
{
    display: none;
    min-height: 145px;
    padding: 10px;
}
div.chat_container div.contactos.show div.container
{
    display: block;
}

div.chat_container div.chat_wdow
{
    margin: 0 5px;
    min-width: 190px;
    background: dimgrey;
    padding: 5px;
    border-radius: 10px 10px 0 0px;
    float: left;
}

div.chat_container div.chat_wdow div.title_area
{
    text-align: center;
}

div.chat_container div.chat_wdow div.container div.msg_area
{
    background-color: white;
    height: 120px;
    padding: 10px;
}

div.chat_container div.chat_wdow div.container
{
    display: none;
}

div.chat_container div.chat_wdow.show div.container
{
    display: block;
}

.chat_wdow input[type="text"]
{
    width: 186px;
}

ウィンドウを折りたたむには、 mootools クラスを介して切り替えます.show。このクラスが欠落している場合、ウィンドウのコンテナ領域があり、display:none適用される場合はdisplay:block.

私がこれまでに試したこと：

  • 固定の親を高さ 0 に設定し、オーバーフローを可視化する
  • 内部コンテナを相対位置に設定し、子を絶対位置に設定する
  • クリアハックとオーバーフローハックの使用
  • マージンを自動値に変更する
  • 内部コンテナとチャイルドの縦サイズと最小高さの変更
  • 表示をインラインおよびインライン ブロックに変更する
  • チャット コンテナを絶対に、内部コンテナを相対に変更する

Google と SO でしばらく検索していましたが、既に試したオプションしか見つかりませんでした。Facebook のチャット CSS も調べましたが、役立つものが見つからないので、新しいアイデアを探しています折りたたまれたdivを下げます。

4

1 に答える 1

1

1 つの解決策は、代わりに display:inline-block または display:inline を使用してから、vertical-align:bottom を設定することです。

例: http://jsbin.com/uhubeh/1/edit

ただし、両方の幅がわかっている場合は、絶対配置を使用することもできます。

于 2013-04-28T05:06:45.967 に答える