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

Question

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

这些看起来好多了（https://codepen.io/defaydesigns/pen/dKNxGj），但原始代码太多，我不得不精简。）

＆＃13;

＆＃13;

.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%;
}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在css中使用display属性

.blogCard{
  display: inline-flex;
}