CSS将图片框放在我的对话框中

Question

我正在尝试创建一个在对话框左侧带有方形图像的消息框。我会在网上尝试不同的例子，然后尝试其他东西，但我的努力开始失败，因为我对此感觉不好。

我唯一能想到的方法就是用一张桌子，但似乎没有人再用桌子做这样的事情了。<DIV>标签是最佳选择吗？<SPAN>？

<div class="alert" id="sfAlert">
<div class="picturebox"></div>
<div class="messagebox">
<span class="button" id="sfClose">&times;</span>
<h2><div class="messagetext" id="sfMsg1">Intro Text 1</div></h2>
<div class="messagetext" id="sfMsg2">Intro Text 2</div><hr/>
<small><div class="messagetext" id="sfMsg3">Intro Text 2</div></small>
</div>

如果能找到一种方法来指定顶部消息sfMsg1的容器应该是大写、粗体字符，那就太好了。我已经用<h2>元素包装了<div>标记，但我不知道这是否是推荐的技术。

https://jsfiddle.net/jp2code/sjvmkf9n/23/

Answer 1

您可以通过多种方式放置图像，如果您不关心它与兄弟图像的关系，一种方法是使用position: absolute。

当您使用position: absolute时，元素的位置将与其最近的定位祖先MDN-ref相关，似乎您希望图像靠近警报的左上角，因此我为该元素赋予了position: relative属性。

要在页眉上使用更大的粗体字体，可以使用font-size和font-weight。

#sfAlert {
position: relative;
background: #ccc;
margin: 30px;
}
.picturebox {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: red;
background-image: url('https://www.w3schools.com/images/colorpicker.gif');
background-size: contain;
}
#sfMsg1 {
font-size: 2em;
font-weight: bold;
padding-left: 2em;
}
#small-message-text {
font-size: 0.85em;
}

<div class="alert" id="sfAlert">
<div class="picturebox"></div>
<div class="messagebox">
<span class="button" id="sfClose">&times;</span>
<div class="messagetext" id="sfMsg1">Intro Text 1</div>
<div class="messagetext" id="sfMsg2">Intro Text 2</div>
<hr/>
<small><div class="messagetext" id="sfMsg3">Intro Text 2</div></small>
<div id="small-message-text">Intro Text 2</div>
</div>
</div>