如何使说明文字在图片下方位于h1下方

Question

I'm trying to make the description text at the bottom line up beside the image. I've tried floats, changing the display property to inline, all to no avail.

IMPORTANT: It looks right in the fiddle , but NOT on the web . What could be the problem?

Here's the 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>

And the 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%;
}

Please note that the website is in the early alpha stage of development.

Answer 1

Instead of Float try position: relative; and use margin for placing it on the required place where you want