浮動DIV，並保持它在基線

我正在聊天模塊上的一個項目，一切工作，但CSS。我有一個聊天元素的全球容器，這個div有固定的位置。在內部，我有兩個div，一個用於聊天窗口，一個用於聯繫人列表，聊天窗口和聯繫人列表都浮動到右側，並且可以通過單擊標題來「最小化」（這隱藏了主體並且只是離開標題可見）。問題是如果我最小化其中一個div，它會保持與其他div相同的頂部（請參閱圖像）。浮動DIV，並保持它在基線

這就是我得到：

the container in the right remains at the top of the div

這就是我想要的：

enter image description here

相關代碼：

<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的高度和溢出可見
塞汀內部容器相對於定位和孩子絕對
清晰溢出黑客
更改頁邊空白至自動值
更改內部容器和兒童的垂直尺寸和最小高度
改變顯示器直插式和內嵌塊
改變聊天容器絕對和內部容器相對

我一直在尋找對谷歌一段時間，SO，但我只發現我已經選項嘗試過，我也看了Facebook的聊天css，但我找不到任何東西來幫助我，所以我正在尋找新的想法來降低崩潰的div。

來源

2013-04-27 Juan Antonio Orozco

您可以創建第二張圖片或顯示佈局應該如何顯示的屏幕快照？具體來說，當最小化時，你想在哪裏放置'.title_area'？你也使用jQuery來顯示/隱藏兩個元素（聊天和聯繫人列表）？謝謝。 – 2013-04-27 10:47:29

我更新它的工作的信息 – 2013-04-28 00:55:31

一種解決方案是使用顯示：內聯塊或顯示：內聯，而不是，然後設置垂直對齊：底部。

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

如果你知道兩者的寬度，但是，你也可以只使用絕對定位。

來源

2013-04-28 05:06:45 mowwwalker

白衣一些修改，也做了同樣的'.chat_wdow'（因爲窗戶可超過1，將progratically添加）和'.chat_container .container'設置「文本阿玲：讓'文字以其原始的樣子 – 2013-04-28 19:36:18

浮動DIV，並保持它在基線

回答

相關問題