我的问题是将div放置在“动态图片”下,并在动态图片下方的div下面显示动态内容:
jsfiddle css类准备填写:
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 </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;
}
目标看:
答案 0 :(得分:4)
您可以尽可能多地relative
和absolute
定位absolutely position an element with a relativity position element,但是你无法通过absolute
定位来做你想要的事情,因为一旦元素的位置受到另一个元素的位置的影响,那就是relative
定位。
编辑:您可以在使用float
和clear
之后实现目标:http://jsfiddle.net/nDvYv/1/