我已经做了一些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")
。