Question

我有一个CSS聊天泡泡，我使用bootstraps container-fluid类来包装div中的内容。 div的内容不会溢出宽度，但是当内容太多时，div会泄漏到div之外。我想这样做，以便div将自动扩展高度以迎合div的内容。我在这里考虑UI，所以我不能使用滚动属性。有任何想法吗？谢谢！

＆＃13;

body {
	background-color: black;
}

.bubble {


position: relative;
width: 275px;
height: 125px;
padding: 1px;
background: white;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #7F7F7F solid 1px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 23px 14px 0;
border-color:transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 49px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 23px 14px 0;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
left: -24px;
top: 49px;
}

.oddbubble 
{
float:right;
position: relative;
width: 275px;
height: 125px;
padding: 1px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #7F7F7F solid 1px;
}

.oddbubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 0 14px 23px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
right: -23px;
top: 49px;
}

.oddbubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 0 14px 23px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
right: -24px;
top: 49px;
}

.container-fluid {
	margin-top: 20px;
}

＆＃13;

<html>
<head>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="bubble.css">
</head>
<body>
	
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="bubble">
					<p>this text spills outside my chat bubble.this text spills outside my chat bubble.this text spills outside my chat bubble</p>
				</div>	
			</div>
		</div>
			
		<div class="row">	
			<div class="col-md-12">
				<div class="oddbubble">
					<p>this text spills outside my chat bubble.this text spills outside my chat bubble.this text spills outside my chat bubble</p>
					<p>this text spills outside my chat bubble.this text spills outside my chat bubble.this text spills outside my chat bubble</p>
				</div>	
			</div>	
		</div>
			
	</div>	



</body>
</html>

＆＃13;

Answer 1

从.bubble

中删除此行

height: 125px;

编辑：修复三角形使用基于父高度的动态位置。：

top: 40%;

bootstrap CSS chat-bubble有什么内容泄露在div之外？

1 个答案: