Html 为什么我的内容显示在 div 之外？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10062255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why is my content showing outside the div?
提问by user1227914
I have a "bubble" with content, which is working fine. Now, I want to display a count (2 lines) which should always be in the bottom right corner of that div, INSIDE it. I tried many things but for some reason it always overlaps the div and shows outside. What am I doing wrong?
我有一个包含内容的“泡沫”，它运行良好。现在，我想显示一个计数（2 行），它应该总是在那个 div 的右下角，在它里面。我尝试了很多东西，但由于某种原因，它总是与 div 重叠并显示在外面。我究竟做错了什么？
<style type="text/css">
body{
background-color:#f3f3f3;
}
.commentbox{
background-color: #ffffff;
width: 200px;
border-color: #D1D1D1;
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;
position:relative;
}
.count{
float:right;
text-align:right;
}
</style>
<div class="commentbox">
<div class="title">Some several lines long long long long content text goes here
</div>
<div class="count">123<br>456</div>
</div>
回答by Quentin
You are floating .countso it doesn't influence it's parent container's height.
您正在浮动，.count因此它不会影响其父容器的高度。
Set overflow: hiddenon the parent (.commentbox) or use one of the other float containing techniquesso that it does.
overflow: hidden在父级 ( .commentbox)上设置或使用其他包含浮点数的技术之一来实现。
回答by diewie
Do you really need float: right;for .count? I think text-alignshould be enough for the desired layout.
你真的需要float: right;的.count？我认为text-align对于所需的布局应该足够了。
回答by rgin
Since you're already using position:relativeon the parent div. Try this instead:
由于您已经position:relative在父 div 上使用。试试这个：
.count {
position:absolute;
right:0;
bottom:10px;
}
回答by yannisgu
Probably you have to add a clear after the "count" div.
可能您必须在“计数”div 之后添加一个 clear 。
<style type="text/css">
body{
background-color:#f3f3f3;
}
.commentbox{
background-color: #ffffff;
width: 200px;
border-color: #D1D1D1;
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;
position:relative;
}
.count{
float:right;
text-align:right;
}
</style>
<div class="commentbox">
<div class="title">Some several lines long long long long content text goes here
</div>
<div class="count">123<br>456</div>
<div style="clear: both"></div>
</div>
