0
我clearfixed父元素，但我不知道如何解决这类问题，它的发生，因为我扣除LOREM lpsum的长度从一些容器，它的错位。CSS clearfix问题浮动
@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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
body {
\t width:100vw;
\t height:100vh;
\t /*background-image: url(../images/background.svg);*/
\t background-color: #1abc9c;
\t box-sizing: border-box;
}
::selection {
\t color:#e74c3c;
\t background-color: #ecf0f1;
}
.container {
\t width:85vw;
\t height:auto;
\t margin:0 auto;
\t
}
.container header {
\t background-color: rgb(236, 240, 241);
}
.container header::after {
\t content: "";
\t display: block;
\t clear:both;
}
.container header h1 {
\t float:left;
\t font-size: 3rem;
\t font-size: 4vw;
\t padding:1% 1%;
\t font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
\t float:right;
\t padding:0.5vw;
}
.container header .m_link h4 {
\t font-family: 'Amaranth',sans-serif;
\t font-weight: 200;
\t color:#2c3e50;
\t font-size: 1rem;
\t font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
\t text-align: right;
}
.container section {
\t margin-top:1vw;
\t padding:0.1vw;
\t
}
.container section::after {
\t display: table;
\t content:"";
\t clear:both;
}
.container section .wcon {
\t width: 19vw;
\t height:auto;
\t border:0.5vw solid #ecf0f1;
\t border-radius:1vw;
\t background-color: #ecf0f1;
\t float:left;
\t margin:0 0.6vw 0.6vw 0.6vw;
\t padding:0.5vw 0;
}
.container section .wcon:hover {
\t background-color: ;
\t border-color:#2c3e50;
\t cursor: pointer;
}
.container section .wcon:after {
\t
\t clear: both;
\t display: table;
\t content:"";
}
.container section .wcon .img_icon {
\t display: block;
\t margin:0 auto;
\t width:18vw;
\t height: auto;
}
.container section .wcon h3 {
\t font-family: 'Titillium Web',sans-serif;
\t text-align: center;
\t font-size: 1.5rem;
\t font-size: 2vw;
\t font-weight: 500;
\t color:#2c3e50;
\t text-transform: uppercase;
\t padding:0.1vw 0;
}
.container section .wcon p {
\t text-align: justify;
\t font-size: 0.8rem;
\t font-size: 1vw;
\t font-family: 'Titillium Web',sans-serif;
\t font-weight: 100;
\t padding:0 0.2vw;
\t line-height: 1.3;
\t color:#34495e;
}
.container section .wcon p:after {
\t content:" Read More";
}<DOCTYPE html>
<html>
\t <head>
\t \t <title> Projects </title>
\t \t <link rel="stylesheet" href="css/style.css">
\t </head>
\t <body>
\t \t \t <div class="container">
\t \t \t \t <header>
\t \t \t \t \t <h1> Projects </h1>
\t \t \t \t \t
\t \t \t \t </header>
\t \t \t </div>
\t \t \t <div class="container">
\t \t \t \t <section>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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.
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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.
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="wcon">
\t \t \t \t \t \t <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
\t \t \t \t \t \t <h3> project name </h3>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t </section>
\t \t \t </div>
\t </body>
</html>
只是一个单一的问题，相信我，没有落后，但只是我想知道的。当“老年人”列出时，您的答案现在第一次如何呢？这不是第一次？编辑是否改变了顺序？而且，再次相信我，这不是什么违反你的回答，它是更好，更详尽，更多的选择。 （其实你的upvote是我的） –
@AlvaroMenéndez谢谢你的赞赏:)我在写我的之前阅读你的答案（我在写关于一个很好的HTML解决方案时指的是它），另一个现在删除了关于JS解决方案作为“不需要JS解决方案”），但似乎接受的答案总是首先根据[元]（http://meta.stackoverflow.com/questions/299343/newer-answer-appearing-as-oldest-when -sorting逐最旧）。如果它还没有被接受，那么有一个问题... – FelipeAls
这不是当我发表评论，但因为我不是100％肯定它，也许我只是想念它。无论如何。好的工作，并且见到你（也许）任何其他日子:) –