我被困在有大量带有消息框的内容页面的地方。在此消息框中,您可以有图像、文本、标题等。但是每个消息框的右上角都会有一个图标。如果我使用位置:绝对,图像将位于框的顶部。但是,如果消息框有标题或段落并填充框的宽度。文本将位于图像下方。
我基本上需要一个具有宽度的图像周围的包装器,因此文本只会坐到图像的边缘。我 99% 确定我通过将绝对定位的图像包装在一个 div 中并给它一些样式来让它在 firebug 中工作。但我今天似乎无法让它工作!
有数百个页面,因此移动 HTML 不是一种选择。该图像当前没有包装器。所以我不得不使用 Jquery 来包装图像。(如果这是答案)。
我知道绝对位置将元素置于文档流之外,但我能做些什么吗?
无论如何,这是我到目前为止的代码:
<div class="message">
<h3>Some text, a header perhaps? But this is the next that will sit under the image, sometimes it's a p tag.</h3>
<img class="messageIcon" src="/link-to-icon/which-are-the-same-size" border="0" width="64" >
<p>Some more random text that would appear in the messagebox this could go on for a few lines.</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('img.messageIcon').wrap('<div class="messageIconWrap" />');
alert("this is a test");
});
</script>
JS 在图像周围包裹了一个 div
CSS:
.messageIconWrap{
display: inline-block;
float:right;
height:60px;
width:60px;
}
div.message {
position: relative;
}
.message {
background: none repeat scroll 0 0 #393939;
clear: both;
}
.messageIcon {
position: absolute;
right: 20px;
top: 20px;
float: right;
}
JS 小提琴 - http://jsfiddle.net/jdp7E/