时间戳

首页 > 解决方案 > 如何使描述文本在图像旁边排成一行，在 h1 下方

html - 如何使描述文本在图像旁边排成一行，在 h1 下方

问题描述

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

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

这是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%;
}

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

标签： htmlcssdisplay

解决方案

而不是 Float 尝试position: relative;使用边距将其放置在您想要的所需位置

推荐阅读