Question

我在包装器内有两个div（左边一个是图像），它们是彼此相邻的，右边的div是右边的绝对位置：0和底部：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中。图像始终为200px，但文本div的宽度根据用户的名称而变化。

Answer 1

我认为bootstrap的功能（假设你因为glyphicon而使用bootstrap）对你有用。你不必再使用浮动因为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>

Divs Overlapping：如何推动一个位置：当它们重叠时绝对位于另一个位置

1 个答案: