Question

我试图在图片旁边的底线做出描述文字。我试过浮动，将显示属性更改为内联，一切都无济于事。

重要提示：它位于fiddle，但不在web 。可能是什么问题呢？

这是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版开发阶段。

Answer 1

而不是Float尝试position: relative;并使用保证金将其放置在您想要的地方

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

1 个答案: