Question

我在格式化这些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; 

}

Answer 1

DEMO 您可以使用flexbox轻松实现它。构建你的HTML

<div class='profile'>

    <div class="image"></div>
    <div class="body">
      <header>Lorem Ipsum</header>
      <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aperiam veniam odit in, maxime..</article>
    </div>

</div>

然后在你的CSS中

.profile{
  display: flex;
}

.profile .body{
  display: flex;
  flex-direction: column;
}

.profile .body>article{
  flex-grow: 1;
}

Answer 2

您可以通过为文本创建单独的div来实现此目的，然后应用display：inline-block;

你也可以尝试设置位置：文本的absoulte，然后你需要的只是调整边距。（但取决于使用）

Answer 3

<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;width:300px;">

      <div class="overlay" style="float:left;width:30%;height:200px;">
      Profile Picture
      <img src=""/></div>
      <div id="right-side" style="float:left;width:70%;">
      <div id="RightPicAbove" class="info" style="background:red;height:20px;">
        Name plate
      </div>
      <div id="RightPicBelow" class="info" style="background:green;height:180px;">
        Chat goes here..
      </div>
      </div>
</body>
</html>

为什么这些div不排队？

3 个答案: