我已经做了一些php和mysql的东西来生成动态聊天框。一切正常,但如果有多个聊天框,则对齐时会出现问题。两个聊天框与inline-block不一致。我想让聊天框内联阻止聊天框,但是我不怎么做,我尝试了很多方法,但是仍然遇到这个烦人的错误,请查看我的代码,并告诉我我在哪里做错了

看一下当前输出,它彼此重叠,我想把它作为图像放置在右侧:



<?
    $con = mysql_connect('localhost','root','');
    mysql_select_db('social_net', $con) or die('error in(application/view/chatting.php) at line 3');
?>
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="facivon.ico">

<title>Facebook like chat</title>
<link href="style.css" rel="stylesheet">
<style>

.chat_box{
    position:fixed;
    right:20px;
    bottom:0px;
    width:250px;
}
.chat_body{
    background:white;
    height:400px;
    overflow-y:scroll;
    border-right: 1px solid rgba(0, 0, 0, 0.28);
    border-left: 1px solid rgba(0, 0, 0, 0.28);
    padding:5px 0px;
}

.chat_head,.msg_head{
    background:#f39c12;
    color:white;
    padding:15px;
    -moz-user-select:none;
    user-select:none;
    font-weight:bold;
    cursor:pointer;
    border-radius:5px 5px 0px 0px;
}

.msg_box{
    position:fixed;
    bottom:-5px;
    display:inline-block;
    border-right: 1px solid rgba(0, 0, 0, 0.28);
    border-left: 1px solid rgba(0, 0, 0, 0.28);
    width:250px;
    background:white;
    border-radius:5px 5px 0px 0px;
}

.msg_head{
    background:#3498db;
    -moz-user-select:none;
    user-select:none;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    resize:none;
}

.close{
    float:right;
    margin:-15px;
    border-radius:0px 5px 0px 0px;
    padding:15px;
    -moz-user-select:none;
    user-select:none;
    cursor:pointer;
    background:rgba(71, 62, 48, 0.63) none repeat scroll 0% 0%;
}
.minimize{
    float:right;
    cursor:pointer;
    padding-right:5px;

}

.user{
    position:relative;
    padding:10px 30px;
}
.user:hover{
    background:#f8f8f8;
    cursor:pointer;

}
.user-0{
    content:'';
    position:absolute;
    background:#535a56;
    height:7px;
    width:7px;
    left:10px;
    top:18px;
    border-radius:4px;
}
.user-1{
    content:'';
    position:absolute;
    background:#2ecc71;
    height:7px;
    width:7px;
    left:10px;
    top:18px;
    border-radius:4px;
}

.msg_a{
    position:relative;
    background:#FDE4CE;
    padding:10px;
    min-height:10px;
    margin-bottom:5px;
    margin-right:10px;
    border-radius:5px;
}
.msg_a:before{
    content:"";
    position:absolute;
    width:0px;
    height:0px;
    border: 10px solid;
    border-color: transparent #FDE4CE transparent transparent;
    left:-20px;
    top:7px;
}


.msg_b{
    background:#EEF2E7;
    padding:10px;
    min-height:15px;
    margin-bottom:5px;
    position:relative;
    margin-left:10px;
    border-radius:5px;
    word-wrap: break-word;
}
.msg_b:after{
    content:"";
    position:absolute;
    width:0px;
    height:0px;
    border: 10px solid;
    border-color: transparent transparent transparent #EEF2E7;
    right:-20px;
    top:7px;
}
#finfrndslink
{
    display:block;
    padding:.6em;
    margin:0px auto;
    width:94%;
    margin-top: 10em;
    background: rgb(54, 42, 42) none repeat scroll 0% 0%;
    text-align: center;
    color: white;
    border-radius: 5px;
}
    </style>
       <script src="<?=base_url().'assets/js/jquery-1.10.1.min.js'?>"></script>
    <script>
    $(document).ready(function(){
        $('.msg_box').hide();
        $('.chat_head').click(function(){
            $('.chat_body').slideToggle('slow');
        });
    });
    </script>
  </head>
  <body>
  <?
    $user_name = $this->session->userdata('user');
    $sql1 = "SELECT * FROM users WHERE user_name='$user_name'";
    $query1 = mysql_query($sql1);
    $row1 = mysql_fetch_assoc($query1);
    $u_id = $row1['u_id'];

    $sql = "SELECT * FROM friends T1 JOIN users T2 ON T1.frnd_id=T2.u_id WHERE T1.u_id='$u_id' && T1.status='confirm'";
    $query3 = mysql_query($sql);
    $query = mysql_query($sql);
    $count = mysql_num_rows($query);
  ?>
  <div class="chat_box">
    <div class="chat_head">Chat</div>
    <div style="display: none;" class="chat_body">
    <?
    if($count!=0)
    {
        $i=1;
        while($row = mysql_fetch_assoc($query))
        {
            ?>
                <div class="user" id="u<?=$i?>" style="text-transform:capitalize"><span class="user-<?=$row['logged_in'];?>"></span><?=$row['f_name'].' '.$row['l_name']?></div>
            <?
            $i++;
        }
    }
    else
    {
        ?>
        <a href='<?=base_url()?>find_friends' id='finfrndslink'>Find Friends</a>
        <?
    }
    ?>
    </div>
    <?
    $i=1;
        while($row1 = mysql_fetch_assoc($query3))
        {
            ?>
                <script>
                $(document).ready(function(){
                    $('#mh<?=$i?>').click(function(){
                        $('#mw<?=$i?>').slideToggle('slow');
                    });

                    $('#cl<?=$i?>').click(function(){
                        $('#mb<?=$i?>').hide();
                    });

                    $('#u<?=$i?>').click(function(){
                        $('#mw<?=$i?>').show();
                        $('#mb<?=$i?>').show();
                    });

                    $('#ti<?=$i?>').keypress(
                    function(e){
                        if (e.keyCode == 13) {
                            e.preventDefault();
                            var msg = $(this).val();
                            $(this).val('');
                            if(msg!='')
                            $('<div class="msg_b">'+msg+'</div>').insertBefore('#msg_push<?=$i?>');
                            $('#msg_body<?=$i?>').scrollTop($('#msg_body<?=$i?>')[0].scrollHeight);
                        }
                    });
                });
                </script>
                <div class="msg_box" id="mb<?=$i?>" style="right:290px">
                    <div class="msg_head" id="mh<?=$i?>">
                    <font style="text-transform:capitalize"><?=$row1['f_name'].' '.$row1['l_name']?></font>
                    <div class="close" id="cl<?=$i?>" title="Close">x</div>
                    </div>
                    <div class="msg_wrap" id="mw<?=$i?>">
                        <div class="msg_body" id="msg_body<?=$i?>">
                            <div class="msg_a">This is from A   </div>
                            <div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>
                            <div class="msg_a">Wow, Thats great to hear from you man </div>
                            <div class="msg_push" id="msg_push<?=$i?>"></div>
                        </div>
                    <div class="msg_footer"><textarea class="msg_input" id="ti<?=$i?>" placeholder="write your message here" rows="2"></textarea></div>
                    </div>
                </div>
            <?
            $i++;
        }
    ?>
  </div>
</body>
</html>

最佳答案

您可以使用jQuery分配CSS属性。一个示例是$(selector).css("margin-right", "20px")

07-24 16:38