Divs重叠：如何将一个位置推到另一个位置：当它们重叠时绝对在另一个下方

Question

我在一个包装器中有两个 div（左边是一个图像），它们应该彼此相邻，右边的 div 被绝对定位为 right:0 和 bottom:0 所以它定位到底部左侧的 div 图像。问题是，当屏幕变得足够小时，绝对位置会与图像重叠。我添加了一个 div，它只占用包装器中的空间，并且避免了重叠，但是现在当您缩小屏幕时，div 会位于图像下方，但它不会在下方重新定位；它向右移动。这是一个关于 JSfiddle 的例子：

http://jsfiddle.net/xbdsq7zj/

这里是html：

<div class='ideaside'>  
  <div class='ideaphoto'>
      <img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
  </div>
  <div style="float:left;  width:150px; height: 120px;">&nbsp;</div>
  <div class='ideainfo'>
      <p clas='glyphicon glyphicon-star unclickable'></p>
    <span>Followers</span></p>
    <p><strong>
      Phase 1
    </strong></p>
    <p>By <%= render @idea.user %></p>
    <i>2 hours ago </i>
  </div>
</div>
<br>
  <p class='doc'>
    <b>Brief:</b>
    t's not fallacious at all because HTML was designed intentionally. Misuse of an element might        not be  completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
  </p>

这是css：

.ideaphoto {
  float:left;
}

.ideainfo {
  position:absolute;
  bottom:0;
  right:0;
}

.ideaside {
  position:relative;
 overflow:hidden;
}

我希望它重新定位，使其直接位于图像下方，而不是紧邻图像下方的一些空白区域。不使用 Jquery 碰撞检测是否可行？

谢谢。

编辑：我正在使用 Bootstrap，这一切都发生在 col-md-4 中。图像始终为 200 像素，但文本 div 的宽度会根据用户的姓名而有所变化。

Answer 1

我认为引导程序的功能（假设您因为字形图标而为此使用引导程序）将对您有用。您不必再使用 float，因为 bootstrap 会为您完成。

<div class="row">
    <div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
         <!--Enter your Image code here.-->
    </div>
    <div class="col-md-6 col-sm-12 ideainfo">
          <!--Enter your IdeaInfo here.-->
    </div>
</div>