1

我试图让下面的卡片水平显示，但它们一直垂直显示。我不知道如何改变这一点。我尝试了几种不同的方法，但是卡内的内容会移动，或者什么也没发生。这不是因为窗口大小。

这些看起来好多了（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>

4

1 回答 1

0

您可以在 css 中使用 display 属性

.blogCard{
  display: inline-flex;
}
于 2018-06-10T21:24:58.877 回答