我在格式化这些div时遇到了问题....我在我的div上放置了一个边框,以便您可以看到发生了什么......我尝试将它们排成第二个图像,而我不明白为什么我的顶部div不是完全正确的,我希望它能够一直扩大,直到它击中个人资料照片div,但它不能比现在更高。我希望实际的消息能够适应任何不是个人资料图片或名牌的地方。我不明白为什么聊天与铭牌相交。这些div如何不排队?
如果我不清楚,上面的图片是它在做什么,第二个画面是什么,我试图完成
这里是它是做什么...
我需要它这样做
.chat{
border: 2px solid #73AD21;
font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:300%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
line-height:1;
margin: 20px;
padding:0px;
opacity:1.0;
position: relative
}
.newChat{
}
.chatBubble{
position: relative;
left:40px;
max-width: 400px;
max-height: 350px;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
/*
border-radius: 10px;
border-spacing: 10px 50px;
border: #7F7F7F solid 4px;
*/
word-wrap: break-word;
height: -webkit-fit-content;
height: -moz-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
float: bottom;
}
.speechBubble{
max-width:100%;
max-height:100%;
}
html, body, .glass {
width: 100%;
height: 100%;
overflow: hidden;
}
.glass::before {
display: block;
width: 100%;
height: 100%;
background-size: cover;
content: ' ';
opacity: 0.4;
}
/*
*/
.glass {
/*
border-radius: 10px;
border-spacing: 10px 50px;
border: #7F7F7F solid 4px;
*/
background: rgba(81, 81, 81, .3);
position: relative;
left:40px;
bottom:0px;
min-width: 200px;
min-height: 75px;
max-width: 400px;
max-height: 350px;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
word-wrap: break-word;
/* height: -webkit-fit-content; */
height: -moz-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
float: bottom;
margin-bottom:10px;
}
.profilePic{
border: 2px solid #73AD21;
width: 100px;
height: 100%;
left: 0px;
bottom:0px;
float:left;
position: absolute;
/* border-radius: 5px; */
var thisBubble = $('<div>').addClass('glass').append(
$('<div>').addClass('nameTag').append(fullName)).append(
$('<img src="'+ profilePic +'">').addClass('profilePic')).append(
$('<div>').addClass('chat').append(message)).appendTo('#MenuBackground');
setTimeout(function(){thisBubble.fadeOut('slow');}, 10000);
}
}
.nameTag{
border: 2px solid #73AD21;
font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:100%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
position: absolute;
top:0px;
right: 5px;
float: top;
}