数字卡显示垂直而不是水平

Question

我试图让下面的卡片水平显示，但它们一直垂直显示。我不知道如何改变这一点。我已经尝试了几种不同的东西，但卡内的内容要么移动，要么什么都没有发生。这不是因为窗口大小。

这些看起来好多了(https://codepen.io/defaydesigns/pen/dKNxGj(，但原版有太多代码，我必须简化。

.blog, button {
font-family: Rockwell;
}
.blogCard {
	max-width: 300px;
	height: 250px;
	border: 2px solid #a81e36;
	border-radius: 20px;
	-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 10px;
	box-shadow: 0px 0px 10px #a81e36;
	-moz-box-shadow: 0px 0px 10px #a81e36;
	-webkit-box-shadow: 0px 0px 10px #a81e36;
	margin: 5%;
}

<div class="blog">
		  <div class="blogCard">
<div class="blogTitle">
		  <h1>RANT 1</h1>
		  </div>
		  <div class="blogSummary">
		  Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
		  </div>
		  
		 <center><button class="blogButton">
			 READ MORE &rarr;
		  </button></center>
	  </div>
		  <div class="blogCard">
<div class="blogTitle">
		  <h1>RANT 1</h1>
		  </div>
		  <div class="blogSummary">
		  Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
		  </div>
		  
		 <center><button class="blogButton">
			 READ MORE &rarr;
		  </button></center>
	  </div>
		  </div>

Answer 1

您可以在 css 中使用显示属性

.blogCard{
display: inline-flex;
}