css Checkerboard布局的CSS

Posted 2021-05-13

/* # Checker Content
---------------------------------------------------------------------------------------------------- */
.home-top {
	margin: 40px auto;
}

.home-top .featured-content .entry {
	padding: 0;
	margin: 0 0 30px;
	background: #fff;
	overflow: hidden;
}

.home-top .featured-content .entry-header,
.home-top .featured-content .entry-content {
	padding-left: 7.5%;
	padding-right: 7.5%;
	float: none;
	margin-bottom: 40px;
}

.home-top .featured-content .entry-title {
	display: inline-block;
}

.home-top .featured-content .entry-header {
	padding-top: 6%;
	clear: both;
}

.home-top .featured-content .entry-content {
	padding-bottom: 1%;
}

.home-top .featured-content .entry-image {
	max-width: none;
	width: 100%;
	float: none;
	height: auto;
	max-height: 360px;
}

.home-top .featured-content .entry > a {
  margin: 0;
}


@media only screen and (min-width: 500px) {
	
	.home-top .featured-content .entry-image {
		float: left;
		height: 600px;
		max-height: none;
		width: auto;
	}
}
	


@media only screen and (min-width: 650px) {
	
	.home-top .featured-content .entry {
		margin: 0;
	}
	
	.home-top .featured-content .entry > a {
	  max-width: 50%;
	}
	
	.home-top .featured-content .entry-header,
	.home-top .featured-content .entry-content {
		width: 50%;
		float: left;
		margin-bottom: 0;
		clear: none;
	}
	
	.home-top .featured-content .entry-image {
		float: left;
		height: 600px;
		max-height: none;
	}
	
	.home-top .featured-content .entry:nth-of-type(even) > a {
		float: right;
	}
	
	.home-top .featured-content .entry:nth-of-type(odd) > a {
		float: left;
	}
	
	.home-top .featured-content .entry:nth-of-type(odd) > a .entry-image {
		float: right;
	}

}