需要两个左浮动的 div 以适应父级的高度
Need two left floated divs to fit height of parent
我无法让我的两个 floated div 适合父 div 的 height。
我见过几种不同的解决方案，但我 运行 遇到了麻烦，因为当内容量较小时，我还需要父级 div 来填充屏幕。
我可以得到一个 floated div 来填充 space 但是如果另一个有更多的内容那么它看起来很奇怪。
我发布了我认为受到影响的css。您可以在我的 jsfiddle.
中找到其余部分
* {
margin: 0;
padding: 0
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
/* to fill screen 100% even with less content */
height: 100%;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: 100%;
overflow: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border-left: #ECA845 solid 8px;
border-right: #ECA845 solid 8px;
border-bottom: #ECA845 solid 8px;
-webkit-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 75%;
}
#sidebar {
background-color: #498A21;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 25%;
}
<body>
<div id="container">
<div id="top">
</div>
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<br>
<div align="center">
</div>
<br>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
</div>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
</body>
您可以使用 flexbox 来实现：
我稍微更改了您的标记并调整了您的 CSS。
*,
*::before,
*::after {
box-sizing: border-box
}
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%;
}
body {
position: relative;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border: #ECA845 solid border-width: 0 8px 8px;
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
@font-face {
font-family: huntson;
src: url(fonts/huntson.ttf);
}
img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
height: auto;
display: flex;
}
#sidebar {
background-color: #498A21;
height: auto;
}
#sidebar h4 {
font-family: huntson;
font-size: 2.75em;
color: #000;
padding: 20px 0px;
letter-spacing: -0.5px;
text-align: center;
border-bottom: #470C0E solid 4px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin-bottom: 20px;
line-height: 1.9em;
padding: 10px;
}
#sidebar ul li.bg {
background-color: #333;
}
#sidebar li ul {
list-style: none outside none;
margin: 0px;
}
#sidebar li ul li {
display: block;
border-top: none;
padding: 7px 2px;
margin: 0;
line-height: 1.5em;
font-size: 0.85em;
}
#sidebar ul.blocklist {
border-top: 1px solid #333;
}
#sidebar ul.blocklist li {
border-bottom: 1px solid #333;
padding: 0;
}
#sidebar ul.blocklist li a {
border-bottom: 0;
display: block;
padding: 12px 10px;
}
#sidebar ul.blocklist li a.selected {
background-color: #E8D46F;
background: linear-gradient(#E8D46F, #E9B252);
border: 1px solid #9B7830;
color: #fff;
font-weight: bold;
}
#sidebar ul.newslist li {
padding: 30px 5px;
text-align: center;
}
#sidebar ul.newslist p {
color: #000;
font-size: 1.1em;
font-weight: bold;
}
footer {
height: 50px;
width: 100%;
}
footer p,
footer p a {
color: #fff;
text-decoration: none;
text-align: center;
padding-top: 15px;
}
article {
padding: 10px 40px 20px 5px;
}
article p {
font-size: 1.25em;
line-height: 1.9em;
margin-bottom: 20px;
}
h1 {
color: #FFF;
font-family: huntson;
font-size: 5em;
font-weight: 200;
padding: 0 0 5px;
margin: 0;
}
img.border {
border: 5px #fff solid;
margin-bottom: 20px;
}
nav {
width: 100%;
background-color: #CCB088;
padding: 15px 0px;
}
nav ul {
list-style: none;
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
padding: 0px 18px;
}
nav ul li a {
color: #470C0E;
font-size: 1em;
text-decoration: none;
letter-spacing: 0;
border-bottom: none;
font-family: "Arial Black", Gadget, sans-serif;
}
nav ul li a:hover {
text-decoration: none;
color: #fff;
border-bottom: 1px solid #ECA845;
}
nav ul li.selected a,
nav ul li.selected a:hover {
color: #931C1F;
}
.clear {
clear: both;
}
<div id="container">
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
当你希望两列或多列等高（即最长列的高度）时，我主张使用以下方法：
CSS
.eq-col-group {
overflow: hidden;
}
.eq-col {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
HTML
<div id="container">
<!-- etc. -->
<div class="eq-col-group">
<div id="main" class="eq-col">
<!-- etc. -->
</div>
<div id="sidebar" class="eq-col">
<!-- etc. -->
</div>
<div class="clear"></div>
</div>
<!-- etc. -->
</div>
这是被称为 "One True Layout" method, see this CSS-Tricks article 的技巧，用于总结不同的 'equal column height' 方法。
该技术的作者（link 上面）指出 32767px 的值是旧版 Safari 浏览器支持的最大值，否则较小的值就足以满足以下用例列的高度预计会更小（但您也可以将其保留在 32767px）。
基本上，容器元素 .eq-col-group 假定最大列的 content 的高度。每个单独的 .eq-col 列至少 32767px 高，无论它是否有子元素，但你不会看到多余的部分，因为 overflow: hidden 剪辑容器元素 .eq-col-group最大列的最后一个元素。
我建议根据 Don't-Repeat-Yourself 的原则封装这个逻辑，将这些规则放在它们自己的适当命名的 类 中，以便重新使用和更好地审查 HTML.
注意： 这种方法很棒，因为它适用于旧版 IE 浏览器（如 IE 8），而其他基于 CSS3 属性的方法则不能。
我无法让我的两个 floated div 适合父 div 的 height。
我见过几种不同的解决方案，但我 运行 遇到了麻烦，因为当内容量较小时，我还需要父级 div 来填充屏幕。
我可以得到一个 floated div 来填充 space 但是如果另一个有更多的内容那么它看起来很奇怪。
我发布了我认为受到影响的css。您可以在我的 jsfiddle.
中找到其余部分* {
margin: 0;
padding: 0
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
/* to fill screen 100% even with less content */
height: 100%;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: 100%;
overflow: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border-left: #ECA845 solid 8px;
border-right: #ECA845 solid 8px;
border-bottom: #ECA845 solid 8px;
-webkit-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 75%;
}
#sidebar {
background-color: #498A21;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 25%;
}
<body>
<div id="container">
<div id="top">
</div>
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<br>
<div align="center">
</div>
<br>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
</div>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
</body>
您可以使用 flexbox 来实现：
我稍微更改了您的标记并调整了您的 CSS。
*,
*::before,
*::after {
box-sizing: border-box
}
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%;
}
body {
position: relative;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border: #ECA845 solid border-width: 0 8px 8px;
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
@font-face {
font-family: huntson;
src: url(fonts/huntson.ttf);
}
img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
height: auto;
display: flex;
}
#sidebar {
background-color: #498A21;
height: auto;
}
#sidebar h4 {
font-family: huntson;
font-size: 2.75em;
color: #000;
padding: 20px 0px;
letter-spacing: -0.5px;
text-align: center;
border-bottom: #470C0E solid 4px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin-bottom: 20px;
line-height: 1.9em;
padding: 10px;
}
#sidebar ul li.bg {
background-color: #333;
}
#sidebar li ul {
list-style: none outside none;
margin: 0px;
}
#sidebar li ul li {
display: block;
border-top: none;
padding: 7px 2px;
margin: 0;
line-height: 1.5em;
font-size: 0.85em;
}
#sidebar ul.blocklist {
border-top: 1px solid #333;
}
#sidebar ul.blocklist li {
border-bottom: 1px solid #333;
padding: 0;
}
#sidebar ul.blocklist li a {
border-bottom: 0;
display: block;
padding: 12px 10px;
}
#sidebar ul.blocklist li a.selected {
background-color: #E8D46F;
background: linear-gradient(#E8D46F, #E9B252);
border: 1px solid #9B7830;
color: #fff;
font-weight: bold;
}
#sidebar ul.newslist li {
padding: 30px 5px;
text-align: center;
}
#sidebar ul.newslist p {
color: #000;
font-size: 1.1em;
font-weight: bold;
}
footer {
height: 50px;
width: 100%;
}
footer p,
footer p a {
color: #fff;
text-decoration: none;
text-align: center;
padding-top: 15px;
}
article {
padding: 10px 40px 20px 5px;
}
article p {
font-size: 1.25em;
line-height: 1.9em;
margin-bottom: 20px;
}
h1 {
color: #FFF;
font-family: huntson;
font-size: 5em;
font-weight: 200;
padding: 0 0 5px;
margin: 0;
}
img.border {
border: 5px #fff solid;
margin-bottom: 20px;
}
nav {
width: 100%;
background-color: #CCB088;
padding: 15px 0px;
}
nav ul {
list-style: none;
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
padding: 0px 18px;
}
nav ul li a {
color: #470C0E;
font-size: 1em;
text-decoration: none;
letter-spacing: 0;
border-bottom: none;
font-family: "Arial Black", Gadget, sans-serif;
}
nav ul li a:hover {
text-decoration: none;
color: #fff;
border-bottom: 1px solid #ECA845;
}
nav ul li.selected a,
nav ul li.selected a:hover {
color: #931C1F;
}
.clear {
clear: both;
}
<div id="container">
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
当你希望两列或多列等高（即最长列的高度）时，我主张使用以下方法：
CSS
.eq-col-group {
overflow: hidden;
}
.eq-col {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
HTML
<div id="container">
<!-- etc. -->
<div class="eq-col-group">
<div id="main" class="eq-col">
<!-- etc. -->
</div>
<div id="sidebar" class="eq-col">
<!-- etc. -->
</div>
<div class="clear"></div>
</div>
<!-- etc. -->
</div>
这是被称为 "One True Layout" method, see this CSS-Tricks article 的技巧，用于总结不同的 'equal column height' 方法。
该技术的作者（link 上面）指出 32767px 的值是旧版 Safari 浏览器支持的最大值，否则较小的值就足以满足以下用例列的高度预计会更小（但您也可以将其保留在 32767px）。
基本上，容器元素 .eq-col-group 假定最大列的 content 的高度。每个单独的 .eq-col 列至少 32767px 高，无论它是否有子元素，但你不会看到多余的部分，因为 overflow: hidden 剪辑容器元素 .eq-col-group最大列的最后一个元素。
我建议根据 Don't-Repeat-Yourself 的原则封装这个逻辑，将这些规则放在它们自己的适当命名的 类 中，以便重新使用和更好地审查 HTML.
注意： 这种方法很棒，因为它适用于旧版 IE 浏览器（如 IE 8），而其他基于 CSS3 属性的方法则不能。