我有以下 CSS 和 HTML 脚本:
.chat {
width: 100px;
}
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 5px 10px;
position: relative;
vertical-align: top;
max-width: 200px;
min-width: 200px:
word-wrap: break-word;
font-size: 85%;
}
.bubble::before {
background-color: #F2F2F2;
content: "\00a0";
display: block;
height: 10px;
position: absolute;
top: 13px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
width: 20px;
}
.me {
float: left;
margin: 5px 45px 5px 20px;
}
.me::before {
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
left: -9px;
}
.you {
margin: 5px 20px 5px 45px;
right: 10px;
position: absolute;
}
.you::before {
box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}
</style>
</head><body>
<div class="chat">
<div class="bubble you">test1</div>
<div class="bubble you">test2</div>
<div class="bubble me">test3</div>
</div>
</body></html>
但是用这个脚本元素被覆盖放在同一行上，像这样:
test1(test3 overwrites it) test2
但我想要的是:
test1
test2
test3
有人知道怎么做吗？
最佳答案
移除绝对定位并将其换成另一种解决方案。
说明:绝对定位元素对流没有贡献。
第一个“you”元素当前正在文档的正常流中定位。但是，由于它有助于流，下一个“你”元素使用流中的相同点来定位自身并在相同位置呈现。
既然我已经解释过了，我将包含所选答案的一个略微修改的版本:
.chat {
width: 100%;
overflow: hidden; /* clear fix for floats */
}
.bubble {
clear: both;
}
.you {
float: right;
/* position: absolute;
right: 10px; */
}
.chat {
width: 100px;
overflow: hidden;
}
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 5px 10px;
position: relative;
vertical-align: top;
max-width: 200px;
min-width: 200px:
word-wrap: break-word;
font-size: 85%;
clear: both;
}
.bubble::before {
background-color: #F2F2F2;
content: "\00a0";
display: block;
height: 10px;
position: absolute;
top: 13px;
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
transform: rotate( 29deg ) skew( -35deg );
width: 20px;
}
.me {
float: left;
margin: 5px 45px 5px 20px;
}
.me::before {
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
left: -9px;
}
.you {
margin: 5px 20px 5px 45px;
float: right;
}
.you::before {
box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}<div class="chat">
<div class="bubble you">test1</div>
<div class="bubble you">test2</div>
<div class="bubble me">test3</div>
</div>关于html - CSS 在彼此下方显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33134317/