這些div如何不排隊？

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

}

來源

2016-03-01 Travis Tubbs

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; 
}

來源

2016-03-01 03:26:02

您可以通過單獨的div文字使這個，然後應用顯示：inline-block的;兩個

你也可以嘗試設置位置：absoulte文本，那麼所有你需要的是調整頁邊距（但取決於使用的）

來源

2016-03-01 03:34:06

<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>

。

來源

2016-03-03 03:22:56 Kamamba

這些div如何不排隊？

回答

相關問題