CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css3 – 在具有动态高度的绝对图片下定位div大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的问题是将div放在“动态图片”下,并在动态图片下方的div下面有动态内容:

Link to the jsfiddle

jsfiddle css类准备填写:

> .belowPicture
> .belowBelowPicture

HTML:

<div id="wallDetailContent">     
  <section id="wallDetailMessage" style="width 100%"> 
     <img class="wallDetailPicture" src="http://web.scott.k12.va.us/martha2/dmbtest.gif">
     <div style="max-width:70%;">blah gik sig en tur,og købte blah med hjem</div>
  </section>
  <section class="belowPicture">
    <p class="wallByDate"> 20140126220550</p> 
    <p class="wallByBy"> af &nbsp; </p>
    <p class="wallByName"> Anders  </p>
  </section>
  <section class="belowBelowPicture">
      content (should be dynamic,able to fill all the height it need downwards.)
  </section>
</div>

CSS:

.wallDetailPicture{
    top: 5px;
    right : 5px;
    position: absolute;
    display:box;
    width:auto;
    height:auto;
    max-width:30%;
    max-height: 200px;
}
.wallByName{
    font-weight: bold !important; 
    color: blue;
    display:inline-block !important;
}
.wallByDate{
    font-weight: bold !important; 
    display:inline-block !important;
}
.wallByBy{
    display:inline-block !important;
}
.belowPicture{
     background:red;
}
.belowBelowPicture{
    background:green;

}

目标看:

解决方法

您可以尽可能多地混合相对和绝对定位 absolutely position an element with a relativity position element,但是你不能用绝对定位来做你所要求的,因为一旦元素的位置受到另一个元素的位置的影响,那就是相对定位.

编辑:您可以使用浮动和清除后实现您的目标:http://jsfiddle.net/nDvYv/1/

大佬总结

以上是大佬教程为你收集整理的css3 – 在具有动态高度的绝对图片下定位div全部内容,希望文章能够帮你解决css3 – 在具有动态高度的绝对图片下定位div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: