2014-10-18 92 views
0

我有两个divs(左一个是图像)在一个包装的意思是彼此相邻,div在右侧被定位为绝对右边:0和底部:0,因此它位于左边div图像的底部。问题是,当屏幕变得足够小时,绝对位置与图像重叠。我已经添加了一个div,它只占用了包装中的空间,我避免了重叠,但是现在,当您将屏幕缩小时,div会在图像下方移动,但它不会重新定位到下方;它向右移动。这里是一个的jsfiddle例如:Divs重叠:如何推动一个与位置:绝对下另一个时,他们重叠

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的宽度根据用户的名称而有所不同。

+0

有很多方法可以做到这一点。你能说一些关于'.ideainfo'的东西,它是否可以有一个最小宽度的例子?我们需要知道布局何时从一行上的图像文本转到图像下面的图像和文本块的垂直布局。请扩大您的描述,谢谢! – 2014-10-18 14:09:44

回答

0

我认为引导程序的功能(假设您使用引导程序为此因为图形)将对您有用。你不必再使用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> 
+0

谢谢。问题是,它在'col-sm-4'中,文本宽度是可变的。尽管如此,图像始终是200x200px。这会继续吗? 编辑:实际上它不起作用。我怎么会这样做,我说的配置 – annikam 2014-10-18 14:06:05

+0

你清除你的CSS?因为它可能是重载引导方法。什么不起作用,所有这些或图像调整本身? – iamprogrammer10 2014-10-18 14:40:04