html div元素内容超出div

Question

我创建了一个 html 文件，可以在这里找到:

https://jsfiddle.net/e86gvf5m/

文本“触发事件{event} {condition} {sourceDataPoint}”

<div id="triggerName">
    Trigger Event for ${recepientName}
    <br>
    ${event} ${condition} ${sourceDataPoint}
</div>

应该在黑色 div 内。但是它被踢出了包含它的 div。

请建议我如何解决这个问题。

谢谢

Answer 1

你的代码有几个问题，你有 float left; 需要 float: left; 并且它的样式错误的 div。

从你的CSS中删除它

#triggerName {
    float left;
    margin-left: 40%;
}

并将float:left;添加到

#recepientImage {
    background-color: #AFF; 
    width: 40%;
    height: 100%;
    float: left; <-- added
}

updated jsfiddle