我正在聊天模塊上的一個項目,一切工作,但CSS。我有一個聊天元素的全球容器,這個div有固定的位置。在內部,我有兩個div,一個用於聊天窗口,一個用於聯繫人列表,聊天窗口和聯繫人列表都浮動到右側,並且可以通過單擊標題來「最小化」(這隱藏了主體並且只是離開標題可見)。問題是如果我最小化其中一個div,它會保持與其他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的高度和溢出可見
- 塞汀內部容器相對於定位和孩子絕對
- 清晰溢出黑客
- 更改頁邊空白至自動值
- 更改內部容器和兒童的垂直尺寸和最小高度
- 改變顯示器直插式和內嵌塊
- 改變聊天容器絕對和內部容器相對
我一直在尋找對谷歌一段時間,SO,但我只發現我已經選項嘗試過,我也看了Facebook的聊天css,但我找不到任何東西來幫助我,所以我正在尋找新的想法來降低崩潰的div。
您可以創建第二張圖片或顯示佈局應該如何顯示的屏幕快照?具體來說,當最小化時,你想在哪裏放置'.title_area'?你也使用jQuery來顯示/隱藏兩個元素(聊天和聯繫人列表)?謝謝。 – 2013-04-27 10:47:29
我更新它的工作的信息 – 2013-04-28 00:55:31