三种纯css方法实现等高列

最新推荐文章于 2023-06-04 10:30:00 发布

xy_0118

最新推荐文章于 2023-06-04 10:30:00 发布

阅读量1k

点赞数

原文链接：http://blog.csdn.net/u014695532/article/details/51078132

<div id="main">
<div class="main">
<div class="ad_class">
<div class="notice tracking-ad" data-mod="popu_3">

<a href="http://bbs.csdn.net/topics/391926027" target="_blank">
2016攒课第二期之你听课我买单，快来攒你想听的课！
</a>
   
<a href="http://bss.csdn.net/cview/reg/?project_id=2875&identy_id=1652" target="_blank">
2016大数据应用调查</a>
   
<a href="http://blog.csdn.net/blogdevteam/article/details/51073018" target="_blank">
2016年7月微软MVP申请开始了!
</a>

</div> </div>



<script type="text/javascript" ads-src="http://csdnim.qtmojo.com/main/s?user=csdn|blog|fumeiti&db=csdnim&border=0&local=yes&js=ie" src="http://creatim.qtmojo.cn/td/AllyesDeliver.min.js" charset="gbk" id="allyes_ins_14f5fba0b" ads-outputs="0" ads-tid="18917b17d_0"></script><div id="18917b17d_0" style="padding:0;margin:0;border:0;"><script type="text/javascript" data-belong="allyes" src="http://csdnim.qtmojo.com/main/s?user=csdn|blog|fumeiti&db=csdnim&border=0&local=yes&js=ie"></script><script type="text/javascript">
var cpro_id="u2392861";
(window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"250",pat:"17",tn:"baiduCustNativeAD_xuanfu",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0"}
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/f.js" type="text/javascript"></script><script type="text/javascript" data-belong="allyes" src="http://creatim.qtmojo.cn/td/delay.min.js"></script><script type="text/javascript" data-belong="allyes" src="http://creatim.qtmojo.cn/td/delay.min.js"></script><script type="text/javascript" data-belong="allyes" src="http://creatim.qtmojo.cn/td/delay.min.js"></script><script type="text/javascript" data-belong="allyes" src="http://creatim.qtmojo.cn/td/delay.min.js"></script><script type="text/javascript" data-belong="allyes" src="http://creatim.qtmojo.cn/td/delay.min.js"></script></div>



<link href="http://static.blog.csdn.net/css/comment1.css" type="text/css" rel="stylesheet">
<link href="http://static.blog.csdn.net/css/style1.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="http://download.csdn.net/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://c.csdnimg.cn/rabbit/search-service/main.js"></script>
<link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=1.0">
<link rel="stylesheet" href="http://static.blog.csdn.net/css/category.css?v=1.0">
<script type="text/javascript" src="http://static.blog.csdn.net/public/res/bower-libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>

<script type="text/javascript" src="http://static.blog.csdn.net/scripts/web-storage-cache.min.js"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/libprovider.js"></script>

<script type="text/ecmascript">
window.quickReplyflag = true;

var isBole = false;


</script>
<div id="article_details" class="details">
<div class="article_title">


<h1>
<a href="/u014695532/article/details/51078132">
三种纯CSS方法实现等高列
</a>
</h1>
</div>

<div class="article_manage clearfix">
<div class="article_l">

标签：
<a href="http://www.csdn.net/tag/css" target="_blank" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">css</a>

</div>
<div class="article_r">
2016-04-06 20:22
131人阅读
 <a href="#comments" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)
 <a href="javascript:void(0);" οnclick="javascript:collectArticle('三种纯CSS方法实现等高列','51078132');return false;" title="收藏" target="_blank">收藏</a>
 <a href="#report" οnclick="javascript:report(51078132,2);return false;" title="举报">举报</a>

</div>
</div>
<div class="embody" style="display:none" id="embody">
本文章已收录于：
<div class="embody_c" id="lib" value="{"err":0,"msg":"ok","data":[]}"></div>
</div>
<style type="text/css">
.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}
</style>
<script type="text/javascript">
$(function () {
var lib = eval("("+$("#lib").attr("value")+")");
var html = "";
if (lib.err == 0) {
$.each(lib.data, function (i) {
var obj = lib.data[i];
//html += '<img src="' + obj.logo + '"/>' + obj.name + "  ";
html += ' <a href="' + obj.url + '" target="_blank">';
html += ' <img src="' + obj.logo + '">';
html += ' ' + obj.name + '';
html += ' </a>';
});
if (html != "") {
setTimeout(function () {
$("#lib").html(html);
/*
var testhtml = "";
testhtml += '<a href="#">';
testhtml += '<img src="http://img.knowledge.csdn.net/upload/base/1455589744328_328.jpg">';
testhtml += 'Android知识库';
testhtml += '</a>';
$(".embody_c").html(testhtml);
*/
$("#embody").show();
}, 100);
}
}

});
</script>
<div class="category clearfix">
<div class="category_l">
<img src="http://static.blog.csdn.net/images/category_icon.jpg">
分类：
</div>
<div class="category_r">
<label οnclick="GetCategoryArticles('6170271','u014695532','top','51078132');">
CSS（1）
<img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
<img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
<div class="subItem">
<div class="subItem_t"><a href="http://blog.csdn.net/u014695532/article/category/6170271" target="_blank">作者同类文章</a>X</div>
<ul class="subItem_l" id="top_6170271">
</ul>
</div>
</label>
</div>
</div>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>
<div class="bog_copyright">
版权声明：本文为博主原创文章，未经博主允许不得转载。
</div>






<div style="clear:both"></div><div style="border:solid 1px #ccc; background:#eee; float:left; min-width:200px;padding:4px 10px;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a><a href="#" οnclick="javascript:return openct(this);" title="展开">[+]</a><ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;"><li><a href="#t0">方法-1 使用Margins Paddings和 Overflow来实现</a></li><ol><li><a href="#t1">下面是方法-1示例的HTML标签</a></li><li><a href="#t2">下面是这种实现的CSS规则</a></li></ol><li><a href="#t3">方法-2通过CSS伪类和定位实现等高列</a></li><ol><li><a href="#t4">HTML标签与方法-1的html结构一样</a></li><li><a href="#t5">好的在看看CSS规则</a></li></ol><li><a href="#t6">方法-3使用表格实现等高列</a></li><ol><li><a href="#t7">下面是方法-3的HTML</a></li><li><a href="#t8">CSS 部分</a></li></ol></ol></div><div style="clear:both"></div><div id="article_content" class="article_content">
<div class="markdown_views">在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法。在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案。

<img src="https://img-blog.csdn.net/20160406194856107" alt="这里写图片描述" title="">

插图自己弄得，不喜莫喷哈哈。。

下面介绍的三种方法都只用到了CSS , 不涉及jQuery、JavaScript计算实现的方法，所以我把它这篇文章标题设为：三种纯CSS方法实现等高列。 

<h1 id="方法-1-使用margins-paddings和-overflow来实现"><a name="t0"></a>方法-1：使用Margins, Paddings和 Overflow来实现</h1>

第一种方法使用margins, paddings和overflow来迫使列的高度相等。这个方法需要为每个浮动元素设置一个足够大的底部填充。关键是设置在父容器overflow: hidden把多余的部分给它隐藏起来。

<h3 id="下面是方法-1示例的html标签"><a name="t1"></a>下面是“方法-1”示例的HTML标签：</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><div class="main">
<div class="container clearfix">

<div class="content">
<section>
<h1>纯CSS实现等高列(1): 使用Margins, Paddings和 Overflow来实现</h1>
<hr>
<p>第一种方法使用margins, paddings和overflow来迫使列的高度相等。这个方法需要为每个浮动元素设置一个足够大的底部填充。关键是设置在父容器overflow: hidden把多余的部分给它隐藏起来。下面是这种实现的CSS规则:</p>
<p>这个方法很简单! 它可以扩展到更多的行和列的布局中，或者说是所有类型的网格布局。</p>
<p>最后, 再在CSS规则中添加媒介查询，OK, 下面是最后的效果截图。</p>
</section>
</div>

<div class="sidebar">
<aside>
<h2>This is a sidebar</h2>
</aside>
</div>

</div>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul></pre>

<h3 id="下面是这种实现的css规则"><a name="t2"></a>下面是这种实现的CSS规则:</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"> <style>
html, body {
font-family: Microsoft JhengHei, SimHei;
background-color: #29384D;
font-size: 10px;
width: 100%;
height: 100%;
position: relative;
}
.main .container {
width: 80%;
margin: 3em auto;
overflow: hidden;
}
.content {
width: 80%;
float: left;
margin-left: 2px;
color: #464444;
background-color: #FFFFFF;
box-shadow: 2px 2px 3px #1f1d1d, -1px -1px 3px #1f1d1d;
}
.content h1 { font-size: 28px; color: #FF4A59; }
.content p { font-size: 18px; font-family: SimHei; color: #29384D; }
.sidebar {
width: 18%;
float: right;
margin-right: 3px;
color: #FFFFFF;
background-color: #FF4A59;
box-shadow: 2px 2px 3px #151414, -1px -1px 3px #100f0f;
}
.content,
.sidebar {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
section,
aside {
padding: 3em;
}
// 添加媒介查询
@media all and (max-width: 840px) {
.main .container {
padding: 0 3em;
overflow: visible;
}
.content {
float: none;
width: 100%;
}
.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
.content,
.sidebar {
padding-bottom: 0;
margin-bottom: 0;
}
.content {
margin-bottom: 30px
}
}
</style></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li></ul></pre>

最后, 我还在CSS规则中添加媒介查询。

这个方法很简单! 它可以扩展到更多的行和列的布局中，或者说是所有类型的网格布局。

OK, 下面是最后的效果截图。 
<img src="https://img-blog.csdn.net/20160406200557958" alt="这里写图片描述" title="">

<hr>

<h1 id="方法-2通过css伪类和定位实现等高列"><a name="t3"></a>方法-2：通过CSS伪类和定位实现等高列</h1>

这个方法就是使用伪类:after。将父容器设置为相对定位（position: relative），再把容器的伪元素设置为绝对定位(position: absolute)和高度为100%(height: 100%)。然后还需要我们去调整容器伪元素所需的width、left和right。注意：这种方法也要给容器设置overflow: hidden来隐藏溢出。

<h3 id="html标签与方法-1的html结构一样"><a name="t4"></a>HTML标签（与方法-1的html结构一样）：</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><div class="main">
<div class="container clearfix">

<div class="content">
<section>
<h1>纯CSS实现等高列(2): 通过CSS伪类和定位实现等高列</h1>
<hr>
<p>这个方法就是使用伪类:after。将父容器设置为相对定位（position: relative），再把容器的伪元素设置为绝对定位(position: absolute)和高度为100%(height: 100%)。然后还需要我们去调整容器伪元素所需的width、left和right。注意：这种方法也要给容器设置overflow: hidden来隐藏溢出。</p>

<p>内容和侧边栏的左和右定位30 px是为了弥补父容器的填充。同样，最后给它添加媒介查询, 让它变成响应:</p>

</section>
</div>

<div class="sidebar">
<aside>
<h2>This is a sidebar</h2>
</aside>
</div>

</div>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li></ul></pre>

<h3 id="好的在看看css规则"><a name="t5"></a>好的，在看看CSS规则:</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"> <style>
html, body {
font-family: Microsoft JhengHei, SimHei;
background-color: #FFFFFF;
font-size: 10px;
height: 100%;
width: 100%;

}
.main .container {
width: 80%;
margin: 3em auto;
position: relative;
overflow: hidden;
}
.content {
float: left;
margin: 3px;
width: 800px;
color: #FFFFFF;
background-color: #29384D;
box-shadow: 2px 2px 4px #846363, 0px 0px 2px #8E7171;
}
.content h1 { font-size: 28px; }
.content p { font-size: 18px; font-family: SimHei; color: #bea9a9; }
.sidebar {
float: right;
margin: 3px;
width: 230px;
color: #FFFFFF;
background-color: #FF4A59;
box-shadow: 2px 3px 4px #846363;
}
.content:after,
.sidebar:after {
display: block;
position: absolute;
height: 100%;
content: "";
background-color: #FF4A59;
box-shadow: 2px 2px 4px #846363;
}
.content:after {
}
.sidebar:after {
width: 230px;
}
section,
aside {
padding: 30px
}
@media all and (max-width: 840px) {
.main .container {
padding: 0 30px;
overflow: visible;
}
.content {
float: none;
margin-bottom: 30px;
}
.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
.content:after,
.sidebar:after {
display: none
}
}
</style></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li></ul></pre>

内容和侧边栏的左和右定位30 px是为了弥补父容器的填充。

同样，最后也给它添加了媒介查询, 让它变成响应式的，下面是“方法-2”示例的截图:

<img src="https://img-blog.csdn.net/20160406201040538" alt="这里写图片描述" title="">

<hr>

<h1 id="方法-3使用表格实现等高列"><a name="t6"></a>方法-3：使用表格实现等高列</h1>

方法3使用表格来实现列的等高并不会真正使用表格(在HTML里没有用到表格元素), 而只是把CSS属性设置为表格元素的属性来显示。这个方法可能是最简单的解决方案。不过因为是用到了”表格”所有需要特别小心浏览器兼容性问题。尽管如此, 方法-3 仍然是一个优雅、简单、有效的解决方案。

<h3 id="下面是方法-3的html"><a name="t7"></a>下面是方法-3的HTML:</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering">
<div class="main">
<div class="container">

<div class="table">
<div class="row">
<div class="col content">
<h1> 纯CSS实现等高列(3): 使用表格实现等高列</h1>
<hr>
<p>方法3使用表格来实现列的等高并不会真正使用表格(在HTML里没有用到表格元素), 而只是是把CSS属性设置为表格元素的属性来显示。这个方法可能是最简单的解决方案。不过因为是用到了"表格"所有需要特别小心浏览器兼容性问题。尽管如此, 它仍然是一个优雅、简单、有效的解决方案, 下面是方法-3的HTML:</p>
<p>我们将设置父元素设置为display: table。我重置容器padding: 0, 以弥补在table的border-spacing属性。这是我们的CSS:</p>
<p>最后是添加媒体查询，让它变成响应式的。</p>
</div>
<div class="col sidebar">
<h2>This is a Sidebar.</h2>
</div>
</div>
</div>

</div>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul></pre>

<h3 id="css-部分"><a name="t8"></a>CSS 部分:</h3>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"> <style>
html, body {
font-family: Microsoft JhengHei, SimHei;
background-color: #FF4A59;
font-size: 10px;
width: 100%;
height: 100%;
position: relative;
}
.main .container {
padding: 0 0;
}
.table {
width: 80%;
margin: 2em auto;
display: table;
border-collapse: separate;
border-spacing: 30px 0;
}
.row {
display: table-row;
}
.col {
display: table-cell;
background-color: #fff;
padding: 30px;
}
.col.content {
width: 70%;
background-color: #FFFFFF;
box-shadow: 4px 4px 8px #443333;
}
.col.content h1 { font-size: 28px; color: #FF4A59; }
.col.content p { font-size: 18px; font-family: SimHei; color: #29384D; }
.col.sidebar {
width: 25%;
color: #FFFFFF;
background-color: #29384D;
box-shadow: 4px 4px 8px #443333;
}

@media all and (max-width: 840px) {
/* demo 3 */
.main .container {
padding: 0 30px;
}
.table {
display: block;
}
.row {
display: block;
}
.col {
display: block;
}
.col.content {
margin-bottom: 30px;
width: 100%;

}
.col.sidebar {
width: 100%;
}
}
</style></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li></ul></pre>

我们将父元素设置为display: table。重置容器padding: 0, 来弥补在table的border-spacing属性。

方法-3 示例效果截图：

<img src="https://img-blog.csdn.net/20160406201438930" alt="这里写图片描述" title="">

OK , 以上就是总结的三种纯CSS实现等高列问题的解决方法。</div>
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>

</div>



<div class="bdsharebuttonbox tracking-ad bdshare-button-style0-16" style="float: right;" data-mod="popu_172" data-bd-bind="1459957030282">
<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important" target="_blank"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important" target="_blank"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important" target="_blank"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important" target="_blank"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important" target="_blank"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important" target="_blank"></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>


<link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css">





<script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=405544"></script>

<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>


<div id="digg" articleid="51078132">
<dl id="btnDigg" class="digg digg_disable">

<dt>顶</dt>
<dd>2</dd>
</dl>
<dl id="btnBury" class="digg digg_disable">

<dt>踩</dt>
<dd>0</dd>
</dl>
</div>

<ul class="article_next_prev">
<li class="prev_article">上一篇<a href="/u014695532/article/details/51068070" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">使用Classie.js让添加、删除和检查类更容易</a></li>
<li class="next_article">下一篇<a href="/u014695532/article/details/51078484" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">CSS，font-family：中文字体的英文名称</a></li>
</ul>

<div style="clear:both; height:10px;"></div>

<div class="similar_article" style="">
<h4>我的同类文章</h4>
<div class="similar_c" style="margin:20px 0px 0px 0px">
<div class="similar_c_t">
<label class="similar_cur">
CSS（1）
</label>
</div>

<div class="similar_wrap tracking-ad" data-mod="popu_141" style="max-height:195px;">
<a href="http://blog.csdn.net" style="display:none" target="_blank">http://blog.csdn.net</a>
<ul class="similar_list fl"><li>•<a href="http://blog.csdn.net/u014695532/article/details/51078484" id="foot_aritcle_51078484undefined5077829635702074" target="_blank" title="CSS，font-family：中文字体的英文名称">CSS，font-family：中文字体的英文名称</a>2016-04-06<label>阅读1</label></li> </ul>

<ul class="similar_list fr"></ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
GetCategoryArticles('6170271', 'u014695532','foot','51078132');
});
</script>

</div>
<div id="suggest">

</div>
<script language="javascript" type="text/javascript">
$(function(){
$.get("/u014695532/svc/GetSuggestContent/51078132",function(data){
$("#suggest").html(data);
});
});
</script>

<style>
.blog-ass-articl dd {
color: #369;
width: 99%; /*修改行*/
float: left;
overflow: hidden;
font: normal normal 12px/23px "SimSun";
height: 23px;
margin: 0;
padding: 0 0 0 10px;
margin-right: 30px;
background: url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;
}
</style>

<dl class="blog-ass-articl" id="res-relatived">
<div class="embody embody_b" id="libkeyparent" style="display:none">
更多资料请参考：
<div class="embody_c" id="libkey"></div>
</div>

<dt>猜你在找</dt>

<div id="adCollege" style="width: 42%;float: left;">
<script src="http://csdnimg.cn/jobreco/job_reco.js" type="text/javascript"></script>
<script type="text/javascript">
csdn.position.showEdu({
sourceType: "blog",
searchType: "detail",
searchKey: "51078132",
username: "",
recordcount: "5",
containerId: "adCollege" //容器DIV的id。
});
</script>
<div class="tracking-ad" data-mod="popu_84"><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/913" title="零基础实战HTML、XHTML、CSS3应用开发" strategy="v4:content" target="_blank">零基础实战HTML、XHTML、CSS3应用开发</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/1088" title="Div+CSS网页标准化布局视频教程" strategy="v4:content" target="_blank">Div+CSS网页标准化布局视频教程</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/1462" title="div+css视频教程" strategy="v4:content" target="_blank">div+css视频教程</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/489" title="零基础学HTML 5实战开发(第一季)" strategy="v4:content" target="_blank">零基础学HTML 5实战开发(第一季)</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/1262" title="CSS3基础视频课程 - 最实用的CCS教程" strategy="v4:content" target="_blank">CSS3基础视频课程 - 最实用的CCS教程</a></dd></div></div>


<div id="res" data-mod="popu_36" class="tracking-ad" style="width: 42%; float: left; margin-right: 30px; display: none;"></div>

</dl>

<script type="text/javascript">
$(function () {
setTimeout(function () {
var searchtitletags = '三种纯CSS方法实现等高列' + ',' + $("#tags").html();
searchService({
index: 'blog',
query: searchtitletags,
from: 5,
size: 5,
appendTo: '#res',
url: 'recommend',
his: 2,
client: "blog_cf_enhance",
tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>'
});
}, 500);
});

</script>

<div id="ad_cen">

<script type="text/javascript" src="http://csdnim.qtmojo.com/main/s?user=csdn|blog|banner2&db=csdnim&border=0&local=yes&js=ie" charset="gbk"></script><script type="text/javascript">
var cpro_id="u1607657";
(window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"728",rsi1:"90",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script><div id="BAIDU_SSP__wrapper_u1607657_0"><iframe id="iframeu1607657_0" src="http://pos.baidu.com/uclm?sz=728x90&rdid=1607657&dc=2&di=u1607657&dri=0&dis=0&dai=2&ps=9263x347&coa=at%3D3%26rsi0%3D728%26rsi1%3D90%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1459957028410&ti=%E4%B8%89%E7%A7%8D%E7%BA%AFCSS%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E7%AD%89%E9%AB%98%E5%88%97%20-%20%E7%9F%B3%E6%94%BB%E7%8E%89%20-%20%E5%8D%9A%E5%AE%A2%E9%A2%91%E9%81%93%20-%20CSDN.NET&ari=1&dbv=2&drs=1&pcs=1349x667&pss=1349x9329&cfv=18&cpl=5&chi=1&cce=true&cec=UTF-8&tlm=1459957029&ltu=http%3A%2F%2Fblog.csdn.net%2Fu014695532%2Farticle%2Fdetails%2F51078132&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=true&cmi=7&col=zh-CN&cdo=-1&tcn=1459957029&qn=c2803b2f46a0e6f6&tt=1459957028337.905.981.991" width="728" height="90" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="border:0; vertical-align:bottom;margin:0;" allowtransparency="true"></iframe></div>
 </div>

<div class="comment_class">
<div id="comment_title" class="panel_head">
查看评论<a name="comments"></a></div>
<div id="comment_list">   暂无评论 <div class="clear"></div></div>
<div id="comment_bar">
</div>
<div id="comment_form"><div class="guest_link">您还没有登录,请<a href="javascript:void(0);" οnclick="javascript:loginbox();">[登录]</a>或<a href="http://passport.csdn.net/account/register?from=http%3A%2F%2Fblog.csdn.net%2Fu014695532%2Farticle%2Fdetails%2F51078132">[注册]</a></div></div>
<div class="announce">
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场<a name="reply"></a><a name="quote"></a></div>
</div>

<script type="text/javascript">
var fileName = '51078132';
var commentscount = 0;
var islock = false
</script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script>
<div id="ad_bot">
</div>
<div id="report_dialog">
</div>

<div id="d-top" style="bottom:60px;">
<a id="quick-reply" class="btn btn-top q-reply" title="快速回复" style="display:none;">
<img src="http://static.blog.csdn.net/images/blog-icon-reply.png" alt="快速回复">
</a>

<a id="d-top-a" class="btn btn-top backtop" style="display: none;" title="返回顶部" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_huidaodingbu'])">
<img src="http://static.blog.csdn.net/images/top.png" alt="TOP">
</a>
</div>
<script type="text/javascript">
$(function ()
{
$("#ad_frm_0").height("90px");

setTimeout(function(){
$("#ad_frm_2").height("200px");
},1000);
});

</script>
<style type="text/css">
.tag_list
{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D7CBC1;
color: #000000;
font-size: 12px;
line-height: 20px;
list-style: none outside none;
margin: 10px 2% 0 1%;
padding: 1px;
}
.tag_list h5
{
background: none repeat scroll 0 0 #E0DBD3;
color: #47381C;
font-size: 12px;
height: 24px;
line-height: 24px;
padding: 0 5px;
margin: 0;
}
.tag_list h5 a
{
color: #47381C;
}
.classify
{
margin: 10px 0;
padding: 4px 12px 8px;
}
.classify a
{
margin-right: 20px;
white-space: nowrap;
}
</style>

<div class="tag_list" style="">

<h5>
<a href="http://www.csdn.net/tag/" target="_blank">核心技术类目</a></h5>
<div class="classify">
<a title="全部主题" href="http://www.csdn.net/tag" target="_blank" οnclick="LogClickCount(this,336);">全部主题</a>
<a title="Hadoop" href="http://g.csdn.net/5272865" target="_blank" οnclick="LogClickCount(this,336);">Hadoop</a>
<a title="AWS" href="http://g.csdn.net/5272866" target="_blank" οnclick="LogClickCount(this,336);">AWS</a>
<a title="移动游戏" href="http://g.csdn.net/5272870" target="_blank" οnclick="LogClickCount(this,336);">移动游戏</a>
<a title="Java" href="http://g.csdn.net/5272871" target="_blank" οnclick="LogClickCount(this,336);">Java</a>
<a title="Android" href="http://g.csdn.net/5272872" target="_blank" οnclick="LogClickCount(this,336);">Android</a>
<a title="iOS" href="http://g.csdn.net/5272873" target="_blank" οnclick="LogClickCount(this,336);">iOS</a>
<a title="Swift" href="http://g.csdn.net/5272868" target="_blank" οnclick="LogClickCount(this,336);">Swift</a>
<a title="智能硬件" href="http://g.csdn.net/5272869" target="_blank" οnclick="LogClickCount(this,336);">智能硬件</a>
<a title="Docker" href="http://g.csdn.net/5272867" target="_blank" οnclick="LogClickCount(this,336);">Docker</a>
<a title="OpenStack" href="http://g.csdn.net/5272925" target="_blank" οnclick="LogClickCount(this,336);">OpenStack</a>
<a title="VPN" href="http://www.csdn.net/tag/vpn" target="_blank" οnclick="LogClickCount(this,336);">VPN</a>
<a title="Spark" href="http://g.csdn.net/5272924" target="_blank" οnclick="LogClickCount(this,336);">Spark</a>
<a title="ERP" href="http://www.csdn.net/tag/erp" target="_blank" οnclick="LogClickCount(this,336);">ERP</a>
<a title="IE10" href="http://www.csdn.net/tag/ie10" target="_blank" οnclick="LogClickCount(this,336);">IE10</a>
<a title="Eclipse" href="http://www.csdn.net/tag/eclipse" target="_blank" οnclick="LogClickCount(this,336);">Eclipse</a>
<a title="CRM" href="http://www.csdn.net/tag/crm" target="_blank" οnclick="LogClickCount(this,336);">CRM</a>
<a title="JavaScript" href="http://www.csdn.net/tag/javascript" target="_blank" οnclick="LogClickCount(this,336);">JavaScript</a>
<a title="数据库" href="http://www.csdn.net/tag/数据库" target="_blank" οnclick="LogClickCount(this,336);">数据库</a>
<a title="Ubuntu" href="http://www.csdn.net/tag/ubuntu" target="_blank" οnclick="LogClickCount(this,336);">Ubuntu</a>
<a title="NFC" href="http://www.csdn.net/tag/nfc" target="_blank" οnclick="LogClickCount(this,336);">NFC</a>
<a title="WAP" href="http://www.csdn.net/tag/wap" target="_blank" οnclick="LogClickCount(this,336);">WAP</a>
<a title="jQuery" href="http://www.csdn.net/tag/jquery" target="_blank" οnclick="LogClickCount(this,336);">jQuery</a>
<a title="BI" href="http://www.csdn.net/tag/bi" target="_blank" οnclick="LogClickCount(this,336);">BI</a>
<a title="HTML5" href="http://www.csdn.net/tag/html5" target="_blank" οnclick="LogClickCount(this,336);">HTML5</a>
<a title="Spring" href="http://www.csdn.net/tag/spring" target="_blank" οnclick="LogClickCount(this,336);">Spring</a>
<a title="Apache" href="http://www.csdn.net/tag/apache" target="_blank" οnclick="LogClickCount(this,336);">Apache</a>
<a title=".NET" href="http://www.csdn.net/tag/.net" target="_blank" οnclick="LogClickCount(this,336);">.NET</a>
<a title="API" href="http://www.csdn.net/tag/api" target="_blank" οnclick="LogClickCount(this,336);">API</a>
<a title="HTML" href="http://www.csdn.net/tag/html" target="_blank" οnclick="LogClickCount(this,336);">HTML</a>
<a title="SDK" href="http://www.csdn.net/tag/sdk" target="_blank" οnclick="LogClickCount(this,336);">SDK</a>
<a title="IIS" href="http://www.csdn.net/tag/iis" target="_blank" οnclick="LogClickCount(this,336);">IIS</a>
<a title="Fedora" href="http://www.csdn.net/tag/fedora" target="_blank" οnclick="LogClickCount(this,336);">Fedora</a>
<a title="XML" href="http://www.csdn.net/tag/xml" target="_blank" οnclick="LogClickCount(this,336);">XML</a>
<a title="LBS" href="http://www.csdn.net/tag/lbs" target="_blank" οnclick="LogClickCount(this,336);">LBS</a>
<a title="Unity" href="http://www.csdn.net/tag/unity" target="_blank" οnclick="LogClickCount(this,336);">Unity</a>
<a title="Splashtop" href="http://www.csdn.net/tag/splashtop" target="_blank" οnclick="LogClickCount(this,336);">Splashtop</a>
<a title="UML" href="http://www.csdn.net/tag/uml" target="_blank" οnclick="LogClickCount(this,336);">UML</a>
<a title="components" href="http://www.csdn.net/tag/components" target="_blank" οnclick="LogClickCount(this,336);">components</a>
<a title="Windows Mobile" href="http://www.csdn.net/tag/windowsmobile" target="_blank" οnclick="LogClickCount(this,336);">Windows Mobile</a>
<a title="Rails" href="http://www.csdn.net/tag/rails" target="_blank" οnclick="LogClickCount(this,336);">Rails</a>
<a title="QEMU" href="http://www.csdn.net/tag/qemu" target="_blank" οnclick="LogClickCount(this,336);">QEMU</a>
<a title="KDE" href="http://www.csdn.net/tag/kde" target="_blank" οnclick="LogClickCount(this,336);">KDE</a>
<a title="Cassandra" href="http://www.csdn.net/tag/cassandra" target="_blank" οnclick="LogClickCount(this,336);">Cassandra</a>
<a title="CloudStack" href="http://www.csdn.net/tag/cloudstack" target="_blank" οnclick="LogClickCount(this,336);">CloudStack</a>
<a title="FTC" href="http://www.csdn.net/tag/ftc" target="_blank" οnclick="LogClickCount(this,336);">FTC</a>
<a title="coremail" href="http://www.csdn.net/tag/coremail" target="_blank" οnclick="LogClickCount(this,336);">coremail</a>
<a title="OPhone " href="http://www.csdn.net/tag/ophone " target="_blank" οnclick="LogClickCount(this,336);">OPhone </a>
<a title="CouchBase" href="http://www.csdn.net/tag/couchbase" target="_blank" οnclick="LogClickCount(this,336);">CouchBase</a>
<a title="云计算" href="http://www.csdn.net/tag/云计算" target="_blank" οnclick="LogClickCount(this,336);">云计算</a>
<a title="iOS6" href="http://www.csdn.net/tag/iOS6" target="_blank" οnclick="LogClickCount(this,336);">iOS6</a>
<a title="Rackspace " href="http://www.csdn.net/tag/rackspace " target="_blank" οnclick="LogClickCount(this,336);">Rackspace </a>
<a title="Web App" href="http://www.csdn.net/tag/webapp" target="_blank" οnclick="LogClickCount(this,336);">Web App</a>
<a title="SpringSide" href="http://www.csdn.net/tag/springside" target="_blank" οnclick="LogClickCount(this,336);">SpringSide</a>
<a title="Maemo" href="http://www.csdn.net/tag/maemo" target="_blank" οnclick="LogClickCount(this,336);">Maemo</a>
<a title="Compuware" href="http://www.csdn.net/tag/compuware" target="_blank" οnclick="LogClickCount(this,336);">Compuware</a>
<a title="大数据" href="http://www.csdn.net/tag/大数据" target="_blank" οnclick="LogClickCount(this,336);">大数据</a>
<a title="aptech" href="http://www.csdn.net/tag/aptech" target="_blank" οnclick="LogClickCount(this,336);">aptech</a>
<a title="Perl" href="http://www.csdn.net/tag/perl" target="_blank" οnclick="LogClickCount(this,336);">Perl</a>
<a title="Tornado" href="http://www.csdn.net/tag/tornado" target="_blank" οnclick="LogClickCount(this,336);">Tornado</a>
<a title="Ruby" href="http://www.csdn.net/tag/ruby" target="_blank" οnclick="LogClickCount(this,336);">Ruby</a>
<a title="Hibernate" href="http://www.csdn.net/hibernate" target="_blank" οnclick="LogClickCount(this,336);">Hibernate</a>
<a title="ThinkPHP" href="http://www.csdn.net/tag/thinkphp" target="_blank" οnclick="LogClickCount(this,336);">ThinkPHP</a>
<a title="HBase" href="http://www.csdn.net/tag/hbase" target="_blank" οnclick="LogClickCount(this,336);">HBase</a>
<a title="Pure" href="http://www.csdn.net/tag/pure" target="_blank" οnclick="LogClickCount(this,336);">Pure</a>
<a title="Solr" href="http://www.csdn.net/tag/solr" target="_blank" οnclick="LogClickCount(this,336);">Solr</a>
<a title="Angular" href="http://www.csdn.net/tag/angular" target="_blank" οnclick="LogClickCount(this,336);">Angular</a>
<a title="Cloud Foundry" href="http://www.csdn.net/tag/cloudfoundry" target="_blank" οnclick="LogClickCount(this,336);">Cloud Foundry</a>
<a title="Redis" href="http://www.csdn.net/tag/redis" target="_blank" οnclick="LogClickCount(this,336);">Redis</a>
<a title="Scala" href="http://www.csdn.net/tag/scala" target="_blank" οnclick="LogClickCount(this,336);">Scala</a>
<a title="Django" href="http://www.csdn.net/tag/django" target="_blank" οnclick="LogClickCount(this,336);">Django</a>
<a title="Bootstrap" href="http://www.csdn.net/tag/bootstrap" target="_blank" οnclick="LogClickCount(this,336);">Bootstrap</a>
</div>

</div>
<script language="javascript" type="text/javascript">
$(function(){
setTimeout(function(){
$.get("/u014695532/svc/GetTagContent",function(data){
$(".tag_list").html(data).show();
});
});
},500);
</script>

<div id="pop_win" style="display:none ;position: absolute; z-index: 10000; border: 1px solid rgb(220, 220, 220); top: 222.5px; left: 630px; opacity: 1; background: none 0px 0px repeat scroll rgb(255, 255, 255);">

</div>
<div id="popup_mask"></div>
<style>
#popup_mask
{
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 9999;
left: 0px;
top: 0px;
opacity: 0.3;
filter: alpha(opacity=30);
display: none;
}

</style>

<script type="text/javascript">
$(function(){
setTimeout(function(){
$(".comment_body:contains('回复')").each(function(index,item){
var u=$(this).text().split('：')[0].toString().replace("回复","")
var thisComment=$(this);
if(u)
{
$.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) {
if(a!=null&&a.data!=null&&a.data.length>0)
{
nick=a.data[0].n;
if(u!=nick)
{
thisComment.text(thisComment.text().replace(u,nick));
}
}
});
}
});

},200);

setTimeout(function(){
$(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
},5000);

setTimeout(function(){
$(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
},10000);

setTimeout(function(){
$(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
},15000);

setTimeout(function(){
$("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"});
},300);
});

function loginbox(){
var $logpop=$("#pop_win");
$logpop.html('<iframe src="https://passport.csdn.net/account/loginbox?service=http://static.blog.csdn.net/callback.htm" frameborder="0" height="600" width="400" scrolling="no"></iframe>');

$('#popup_mask').css({
opacity: 0.5,
width: $( document ).width() + 'px',
height: $( document ).height() + 'px'
});
$('#popup_mask').css("display","block");

$logpop.css( {
top: ($( window ).height() - $logpop.height())/ 2 + $( window
).scrollTop() + 'px',
left:($( window ).width() - $logpop.width())/ 2
} );

setTimeout( function () {
$logpop.show();
$logpop.css( {
opacity: 1
} );
}, 200 );

$('#popup_mask').unbind("click");
$('#popup_mask').bind("click", function(){
$('#popup_mask').hide();
var $clopop = $("#pop_win");
$("#common_ask_div_sc").css("display","none");
$clopop.css( {
opacity: 0
} );
setTimeout( function () {
$clopop.hide();
}, 350 );
return false;
});
}

</script>

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

</div>

xy_0118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种纯css方法实现等高列

原文链接：http://blog.csdn.net/u014695532/article/details/51078132 2016攒课第二期之你听课我买单，快来攒你想听的课！   2016大数据应用调查  &nbsp
复制链接

扫一扫