CSS clearfix问题浮动

时间：2015-09-22 11:22:07

标签： javascript html css html5 css3

我明确了父元素，但我不知道如何解决这类问题，因为我从某个容器中扣除了lorem lpsum的长度并且它错位了。

＆＃13;
＆＃13; 
display_errors = on
＆＃13; 
@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";
}
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

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

以下是纯CSS中的3个解决方案：

使用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 +（对于一些黑客而言更少，但谁更关心？）：

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

答案 1 :(得分：1)

当我遇到这些问题时，我会使用它来添加到html＆＃34;清除＆＃34; div`s。在你的情况下，我将包括每4个元素：

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

clear班级只有：

.clear {clear:both;}

您可能希望在不使用固定宽度的情况下进行网络响应，因此您甚至可以在div's和display:none的元素之间添加更多clear来制作它们＃34;有形项目＆＃34;到达视口宽度时。

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

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

每两个元素都带有这些css：

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

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

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

<强> JSFIDDLE

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

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

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

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

在此link

中归功于@ghayes

<强> JSFIDDLE

相关问题
最新问题