如何使描述文本在图像旁边排列，在 h1 下方

Question

我正在尝试将描述文本放在图像旁边的底部。我尝试过浮动，将显示属性更改为内联，但都无济于事。

重要提示：它在小提琴中看起来是正确的，但在网络上却不是。可能是什么问题？

这是 HTML：

<div class="event-wrapper">
<div class="event">
<p class="event-date">SEP 15</p>
<img class="event-image" src="images/backgrounds/graphicstock/AS6_3297_2-103.jpg">
<h1>Day at Winnekeag</h1>
<p class="event-text">This is some text about this event. It will be at Camp Winnekeag. We hope you can join us. </p>
</div>
</div>

和 CSS：

.event-wrapper {
width: 75%;
margin: 2rem 15%;
}
.event {
display: inline-block;
margin: 1rem 0;
}
.event-date {
width: 100%;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
background-color: brown;
color: white;
margin: 0;
padding:.5rem;
}
.event-image {
display:inline;
width: 40%;
height: auto;
float: left;
margin: 0;
margin-right: 1rem;
padding: 0;
overflow: hidden;
}
.event-wrapper h1 {
display: block;
margin: 1rem;
margin-bottom: 0rem;
padding: 0;
font-size: 1.1rem;
font-weight: bold;
text-align: left;
color: black;
}
.event-text {
float: left;
margin-top:.5rem;
width: 80%;
}

请注意，该网站处于开发的早期测试阶段。

Answer 1

尝试position: relative;并使用边距将其放置在所需的位置，而不是浮点数