时间戳

首页 > 解决方案 > div 或 span 旁边的文本不起作用，我该如何解决这个问题？

html - div 或 span 旁边的文本不起作用，我该如何解决这个问题？

问题描述

我似乎无法将我的文本放在方形 div/span 旁边。

我尝试了一个 div，然后与文本一起浮动；我还尝试了一个带有 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>

我想要蓝色方块旁边的“h2”和“p”的东西。它就像一个事件列表，蓝色框是日期。

标签： htmlcss

解决方案

您可以通过显示日期和文本内联块来简单地修改它

.event-date, .event-text{
  display:inline-block;
}

如果您希望日期浮动到文本的左侧，请添加float:left到日期 CSS。

JSFiddle 演示

推荐阅读