我似乎无法在正方形 div/span 旁边显示我的文本。
我试过一个 div，然后随文本 float ；我还尝试了 display: inline-block 和 display:block 的跨度。我似乎无法找出我做错了什么。已经在 Stack Overflow 上搜索过，但这些解决方案似乎对我不起作用。
这是我使用的代码:
.event-date{
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text{
float: left;
} <body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</main>
</section>
</div>
</body>我想要蓝色方 block 旁边的“h2”和“p”。它就像一个事件列表，蓝色框是日期。
最佳答案
好吧，这很简单，您有主 div，其中将包括日期和文本。您将 float 放在错误的类上，因为 div 之后的元素将是文本，因此您必须添加 float: left;到日期 div。不过，你会得到这样的东西:
.event-date {
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
float: left;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text {
margin: 0;
padding: 0;
}<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<br><h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</section>
</main>
</section>
</div>
</body>我简单地添加了 float: left;到日期 div，去掉文本的填充和边距(以更好地适应日期空间)并添加一个 <br>打破上面的空白空间，这会使文本过多地放在顶部(在 <h2> 标记之前查看它)。希望它有所帮助。如果您也愿意，这里也有 fiddle :
关于html - div 或 span 旁边的文本不起作用，我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56136113/