Question

我正在为一个项目的聊天模块工作，一切正常但css。我有一个聊天元素的全局容器，这个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并溢出可见
将内部容器设置为相对位置，将子设备设置为绝对
使用清除和溢出黑客
将边距更改为自动值
更改内部容器和孩子的垂直尺寸和最小高度
将显示更改为内联和内联块
将聊天容器更改为绝对容器和内容容器

我一直在google上搜索一段时间但是我只找到了我已经尝试过的选项，我也看了facebook的聊天css但我找不到任何可以帮助我的东西，所以我在寻找打倒倒塌的div的新想法。

Answer 1

一种解决方案是使用display：inline-block或display：inline，然后设置vertical-align：bottom。

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

但是，如果你知道两者的宽度，你也可以使用绝对定位。

浮点div并将其保持在基线

1 个答案: