CSS清除问题浮动
CSS clearfix issue floating
我清除固定父元素，但我不知道如何解决这种类型的问题，因为我从一些容器中扣除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>clear是一个与float相关的CSS属性。主要是关于前面的浮动。
Clearfix是一个概念，用于包含(降序)浮点数。参见SO回答"什么是clearfix?"
在2015年不需要JS来做这些!使用.clear的HTML解决方案很好，除非您有很多断点和需要管理的情况。然后你需要不同的类，如.small-clear在那里，.large-clear.clear在这里，等等，前缀被用来提醒他们应该应用哪个断点。
使用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>最后一个IE10+解决方案与flexbox。等高的免费项目;):
小字:你需要Autoprefixer或一个在线工具，如http://pleeease.io/play/为了编写所有需要的Flexbox语法(有三个规范自2009-2010;))
@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>当我有这些问题时，我使用在html中添加"clear"div 's。在你的例子中，每4个元素我将包括:
<div class="clear"></div>
Where clear class just have:
.clear {clear:both;}
可能你想做你的网页响应，因为你没有使用固定的宽度，所以你甚至可以在你的元素与display:none和clear之间包含更多的div's，使它们"可见"当达到你的视口宽度。
作为一个例子，我添加了第二个div，如:
<div class="clear2"></div>
.clear2 {clear:both; display:none;}
@media only screen and (max-width: 650px) {
.container section .wcon {width:47%;} /*
.clear2 {display:block;}
}
(47%只是一个快速的方法，每行2个元素)
JSFIDDLE
Edit:另一种方法是计算(如果文本看起来是动态的)最高元素的最大高度，并将该高度应用于所有元素。使用这个jquery:
$(document).ready(function() {
var maxHeight = -1;
$('.wcon').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.wcon').each(function() {
$(this).height(maxHeight);
});
});
在这个链接中感谢@ghayes
JSFIDDLE
相关文章：
- Magento自定义选项-清除输入字段问题
- 单击按钮更改颜色/清除画布时画布出现问题
- 空函数似乎从包装器中清除了一些类，但不是全部.试图找出问题所在
- 清除谷歌地图图层时遇到问题
- 在 JS 中清除计时器时出现问题
- 如何清除两个提交按钮的验证问题
- 清除超时的问题
- 清除 JavaScript 中按钮的变量输入时遇到问题
- javascript setInterval 清除问题
- 正在清除setTimeout问题
- AEM中清除对话框值的问题
- 从html页面清除cookie时出现问题
- 清除间隔逻辑问题
- 使用jquery清除select字段，但呈现问题
- JavaScript计算器问题与清除按钮
- 绘制图形时清除画布的问题
- CSS清除问题浮动
- 不能清除我的TweenMax预加载动画完成后，所以我不能访问我的网站?我该如何解决这个问题?
- 在引导中类清除修复的问题
- 这个清除超时有什么问题?
