css - 如何在具有可变空间的 div 中包含一个 float

Question

我有一系列带有文本的 div(“组”)，在底 Angular 有一个 float 的 div(“切换”)。如果“组”中的文本有一定长度，我的代码就可以工作，但是由于 div 之间的空间不同，所以 float 的“切换”位置也是如此。我可以将“切换”div 设置为“组”中的绝对定位元素，但文本不会环绕它(并且我需要文本尊重“切换”的边界)。那么，无论大小如何，我怎样才能将“切换”定位在“组”div 的右下角？我应该只打一堆 @media 电话，还是有更好的方法来完成这个？这是我的 HTML:

<div class="group">
<p class="grouptitle"><a href="#">Name of group goes here</a></p>
<p class="grouptext">Brief description of group goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut  nisl ut aliquip isl isi enim ad</p>
<div class="toggle"></div>
</div>

这是我的 CSS:

.group {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 300px;
  height: 300px;
  min-height: 300px;
  min-width: 300px;
  padding: 10px;
  margin: 12px;
  background-color: cyan;
  vertical-align: top; }

.toggle {
  float: right;
  width: 50px;
  height: 50px;
  background-color: green;
  bottom: 0;
  margin-right: -10px;
  margin-top: 32px; }

感谢阅读!

编辑:Here's a fiddle .我需要做到这一点，无论青色 div 中的文本如何，绿色 div 都位于青色 div 的底 Angular ，并且文本环绕在绿色 div 周围。

Answer 1

如果我没看错你的问题，我认为使用:

position: absolute;
bottom:0;
right:0;

会解决的。这是一个 fiddle ，可以向您展示我在说什么。 - http://jsfiddle.net/fishgraphics/b2LxU/13/