CSS clearfix 问题浮动

【问题标题】：CSS clearfix issue floatingCSS clearfix 问题浮动
【发布时间】：2015-09-28 17:07:36
【问题描述】：

我清除了已修复的父元素，但我不知道如何解决它正在发生的此类问题，因为我从某个容器中扣除了 lorem lpsum 的长度并且它放错了位置。 

@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {

	width:100vw;
	height:100vh;
	/*background-image: url(../images/background.svg);*/
	background-color: #1abc9c;
	box-sizing: border-box;


}
::selection {
	color:#e74c3c;
	background-color: #ecf0f1;
}

.container {
	width:85vw;
	height:auto;
	margin:0 auto;


	
}
.container header {
	background-color: rgb(236, 240, 241);
}
.container header::after {
	content: "";
	display: block;
	clear:both;
}
.container header h1 {
	float:left;
	font-size: 3rem;
	font-size: 4vw;
	padding:1% 1%;
	font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
	float:right;
	padding:0.5vw;
}
.container header .m_link h4 {
	font-family: 'Amaranth',sans-serif;
	font-weight: 200;
	color:#2c3e50;
	font-size: 1rem;
	font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
	text-align: right;
}

.container section {
	margin-top:1vw;
	padding:0.1vw;

	
}
.container section::after {
	display: table;
	content:"";
	clear:both;
}
.container section .wcon {
	width: 19vw;
	height:auto;
	border:0.5vw solid #ecf0f1;
	border-radius:1vw;
	background-color: #ecf0f1; 
	float:left;
	margin:0 0.6vw 0.6vw 0.6vw;
	padding:0.5vw 0;
}
.container section .wcon:hover {

	background-color: ;
	border-color:#2c3e50;
	cursor: pointer;

}
.container section .wcon:after {
	
	clear: both;
	display: table;
	content:"";
}
.container section .wcon .img_icon {
	display: block;
	margin:0 auto;
	width:18vw;
	height: auto;
}
.container section .wcon h3 {
	font-family: 'Titillium Web',sans-serif;
	text-align: center;
	font-size: 1.5rem;
	font-size: 2vw;
	font-weight: 500;
	color:#2c3e50;
	text-transform: uppercase;
	padding:0.1vw 0;
}
.container section .wcon p {

	text-align: justify;
	font-size: 0.8rem;
	font-size: 1vw;
	font-family: 'Titillium Web',sans-serif;
	font-weight: 100;
	padding:0 0.2vw;
	line-height: 1.3;
	color:#34495e;


}
.container section .wcon p:after {
	content:" Read More";
}
<DOCTYPE html>
<html>
	<head>
		<title> Projects </title>
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>
			<div class="container">
				<header>
					<h1> Projects </h1>
					
				</header>
			</div>
			<div class="container">
				<section>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>

				</section>
			</div>
	</body>
</html>

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

    clear 是一个与浮点数相关的 CSS 属性。主要是关于前面的花车。
    clearfix 是一个概念，用于包含（降序）浮动。见SO answers about What is clearfix?

    2015 年不需要 JS 来做到这一点！带有.clear 的HTML 解决方案很好，除非您有很多断点和需要管理的情况。然后你需要不同的类，比如那里的.small-clear，这里的.large-clear.clear等等，其中前缀用于提醒它们应该应用哪个断点。

    这里有 3 个纯 CSS 解决方案：

    使用CSS3 :nth-child(an+b)（兼容性：IE9+）每4个项目添加clear: left：

    @import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {

	width:100vw;
	height:100vh;
	/*background-image: url(../images/background.svg);*/
	background-color: #1abc9c;
	box-sizing: border-box;


}
::selection {
	color:#e74c3c;
	background-color: #ecf0f1;
}

.container {
	width:85vw;
	height:auto;
	margin:0 auto;


	
}
.container header {
	background-color: rgb(236, 240, 241);
}
.container header::after {
	content: "";
	display: block;
	clear:both;
}
.container header h1 {
	float:left;
	font-size: 3rem;
	font-size: 4vw;
	padding:1% 1%;
	font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
	float:right;
	padding:0.5vw;
}
.container header .m_link h4 {
	font-family: 'Amaranth',sans-serif;
	font-weight: 200;
	color:#2c3e50;
	font-size: 1rem;
	font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
	text-align: right;
}

.container section {
	margin-top:1vw;
	padding:0.1vw;

	
}
.container section::after {
	display: table;
	content:"";
	clear:both;
}
.container section .wcon {
	width: 19vw;
	height:auto;
	border:0.5vw solid #ecf0f1;
	border-radius:1vw;
	background-color: #ecf0f1; 
	float:left;
	margin:0 0.6vw 0.6vw 0.6vw;
	padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
    clear: left;
}
.container section .wcon:hover {

	background-color: ;
	border-color:#2c3e50;
	cursor: pointer;

}
.container section .wcon:after {
	
	clear: both;
	display: table;
	content:"";
}
.container section .wcon .img_icon {
	display: block;
	margin:0 auto;
	width:18vw;
	height: auto;
}
.container section .wcon h3 {
	font-family: 'Titillium Web',sans-serif;
	text-align: center;
	font-size: 1.5rem;
	font-size: 2vw;
	font-weight: 500;
	color:#2c3e50;
	text-transform: uppercase;
	padding:0.1vw 0;
}
.container section .wcon p {

	text-align: justify;
	font-size: 0.8rem;
	font-size: 1vw;
	font-family: 'Titillium Web',sans-serif;
	font-weight: 100;
	padding:0 0.2vw;
	line-height: 1.3;
	color:#34495e;


}
.container section .wcon p:after {
	content:" Read More";
}
    <DOCTYPE html>
<html>
	<head>
		<title> Projects </title>
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>
			<div class="container">
				<header>
					<h1> Projects </h1>
					
				</header>
			</div>
			<div class="container">
				<section>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>

				</section>
			</div>
	</body>
</html>

    现在是display: inline-block 解决方案，使用vertical-align: top 代替默认基线（非常适合文本和内容，不适用于布局；））。
    兼容性至少是 IE8+ （和一些 hacks 但谁在乎呢？）：

    @import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {

	width:100vw;
	height:100vh;
	/*background-image: url(../images/background.svg);*/
	background-color: #1abc9c;
	box-sizing: border-box;


}
::selection {
	color:#e74c3c;
	background-color: #ecf0f1;
}

.container {
	width:85vw;
	height:auto;
	margin:0 auto;


	
}
.container header {
	background-color: rgb(236, 240, 241);
}
.container header::after {
	content: "";
	display: block;
	clear:both;
}
.container header h1 {
	float:left;
	font-size: 3rem;
	font-size: 4vw;
	padding:1% 1%;
	font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
	float:right;
	padding:0.5vw;
}
.container header .m_link h4 {
	font-family: 'Amaranth',sans-serif;
	font-weight: 200;
	color:#2c3e50;
	font-size: 1rem;
	font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
	text-align: right;
}

.container section {
    display: table;
	margin-top:1vw;
	padding:0.1vw;

	
}
.container section::after {
	display: table;
	content:"";
	clear:both;
}
.container section .wcon {
    display: inline-block;
    vertical-align: top;
	width: 19vw;
	height:auto;
	border:0.5vw solid #ecf0f1;
	border-radius:1vw;
	background-color: #ecf0f1; 
    margin-bottom: 0.6vw
/*    	Margins ruined. You must take into account 4px gap due to whitespace or better remove whitespace from HTML code
    margin:0 0.6vw 0.6vw 0.6vw;*/
	padding:0.5vw 0;
}
.container section .wcon:hover {

	background-color: ;
	border-color:#2c3e50;
	cursor: pointer;

}
.container section .wcon:after {
	
	clear: both;
	display: table;
	content:"";
}
.container section .wcon .img_icon {
	display: block;
	margin:0 auto;
	width:18vw;
	height: auto;
}
.container section .wcon h3 {
	font-family: 'Titillium Web',sans-serif;
	text-align: center;
	font-size: 1.5rem;
	font-size: 2vw;
	font-weight: 500;
	color:#2c3e50;
	text-transform: uppercase;
	padding:0.1vw 0;
}
.container section .wcon p {

	text-align: justify;
	font-size: 0.8rem;
	font-size: 1vw;
	font-family: 'Titillium Web',sans-serif;
	font-weight: 100;
	padding:0 0.2vw;
	line-height: 1.3;
	color:#34495e;


}
.container section .wcon p:after {
	content:" Read More";
}
    <DOCTYPE html>
<html>
	<head>
		<title> Projects </title>
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>
			<div class="container">
				<header>
					<h1> Projects </h1>
					
				</header>
			</div>
			<div class="container">
				<section>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>

				</section>
			</div>
	</body>
</html>

    最后是带有flexbox 的IE10+ 解决方案。免费等高物品；) :
    小字：你需要 Autoprefixer 或像 http://pleeease.io/play/ 这样的在线工具来编写 Flexbox 所需的所有语法（自 2009-2010 以来已经有 3 个规范；））

    @import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {

	width:100vw;
	height:100vh;
	/*background-image: url(../images/background.svg);*/
	background-color: #1abc9c;
	box-sizing: border-box;


}
::selection {
	color:#e74c3c;
	background-color: #ecf0f1;
}

.container {
	width:85vw;
	height:auto;
	margin:0 auto;


	
}
.container header {
	background-color: rgb(236, 240, 241);
}
.container header::after {
	content: "";
	display: block;
	clear:both;
}
.container header h1 {
	float:left;
	font-size: 3rem;
	font-size: 4vw;
	padding:1% 1%;
	font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
	float:right;
	padding:0.5vw;
}
.container header .m_link h4 {
	font-family: 'Amaranth',sans-serif;
	font-weight: 200;
	color:#2c3e50;
	font-size: 1rem;
	font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
	text-align: right;
}

.container section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin-top:1vw;
	padding:0.1vw;

	
}
.container section::after {
	display: table;
	content:"";
	clear:both;
}
.container section .wcon {
	width: 19vw;
	height:auto;
	border:0.5vw solid #ecf0f1;
	border-radius:1vw;
	background-color: #ecf0f1; 
	margin:0 0.6vw 0.6vw 0.6vw;
	padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
    clear: left;
}
.container section .wcon:hover {

	background-color: ;
	border-color:#2c3e50;
	cursor: pointer;

}
.container section .wcon:after {
	
	clear: both;
	display: table;
	content:"";
}
.container section .wcon .img_icon {
	display: block;
	margin:0 auto;
	width:18vw;
	height: auto;
}
.container section .wcon h3 {
	font-family: 'Titillium Web',sans-serif;
	text-align: center;
	font-size: 1.5rem;
	font-size: 2vw;
	font-weight: 500;
	color:#2c3e50;
	text-transform: uppercase;
	padding:0.1vw 0;
}
.container section .wcon p {

	text-align: justify;
	font-size: 0.8rem;
	font-size: 1vw;
	font-family: 'Titillium Web',sans-serif;
	font-weight: 100;
	padding:0 0.2vw;
	line-height: 1.3;
	color:#34495e;


}
.container section .wcon p:after {
	content:" Read More";
}
    <DOCTYPE html>
<html>
	<head>
		<title> Projects </title>
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>
			<div class="container">
				<header>
					<h1> Projects </h1>
					
				</header>
			</div>
			<div class="container">
				<section>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
						</p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
					</div>
					<div class="wcon">
						<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
						<h3> project name </h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
					</div>

				</section>
			</div>
	</body>
</html>

    【讨论】：

    • 只是一个问题，相信我，没有任何问题，只是我想知道的。当它不是第一个时，如果由“older”列出，您现在的答案如何？编辑会更改顺序吗？而且，再次相信我，这与您的答案没有什么不同，它更好，更详细并且有更多选择。 （事实上​​你的赞成票是我的）
    • @AlvaroMenéndez 感谢您的支持 :) 我在写我的答案之前阅读了您的答案（我在写一个好的 HTML 解决方案时会提到它），另一个关于 JS 解决方案的问题现在被删除了（我称之为“不需要 JS 解决方案”）但根据meta，似乎接受的答案总是首先出现。如果还没有被接受，那就有问题了......
    • 这不是我发表评论的时候，而是因为我不是 100% 确定它，也许我只是想念它。无论如何np。干得好，再见（也许）任何一天:)
    【解决方案2】：

    当我遇到这些问题时，我会添加到 html “clear” div 中。在您的情况下，我将包括每 4 个元素：

    <div class="clear"></div>

    clearclass 刚刚有：

    .clear {clear:both;}

    可能您可能希望在不使用固定宽度的情况下进行 Web 响应，因此您甚至可以在元素之间包含更多 div'sdisplay:none 和 clear，以使它们在到达视口时“可见”宽度。

    例如，我添加了第二个div，例如：

    <div class="clear2"></div>

    每 2 个带有这些 css 的元素：

    .clear2 {clear:both; display:none;}

@media only screen and (max-width: 650px) {
    .container section .wcon {width:47%;} /*        
    .clear2 {display:block;}          
    }

    （47% 只是每行 2 个元素的快速方法）

    JSFIDDLE

    编辑： 另一种方法是计算（如果文本看起来是动态的）最高元素的最大高度，并将该高度应用于所有元素。使用这个 jquery：

    $(document).ready(function() {
   var maxHeight = -1;

   $('.wcon').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.wcon').each(function() {
     $(this).height(maxHeight);
   });
 });

    感谢@ghayes link

    JSFIDDLE

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2011-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-11-18
      • 2013-08-15
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode