Как сделать так, чтобы текст описания располагался рядом с изображением, ниже h1 - PullRequest
Новая
       6

Как сделать так, чтобы текст описания располагался рядом с изображением, ниже h1

0 голосов
/ 17 мая 2018

Я пытаюсь сделать текст описания в нижней строке рядом с изображением.Я пробовал float, изменяя свойство display на inline, но все безрезультатно.

ВАЖНО: Это выглядит прямо в скрипке , но НЕ в сети .В чем может быть проблема?

Вот 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%;
}

Обратите внимание, что сайт находится на ранней альфа-стадии разработки.

1 Ответ

0 голосов
/ 18 мая 2018

Вместо Float попробуйте position: relative; и используйте маржу для размещения в нужном месте, где вы хотите

...