`
axl234
  • 浏览: 259520 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用text-justify 和 display:inline-block;实现两端对齐的解决方案

    博客分类：
  • css
WordPressXHTMLHTML 
阅读更多

display:inline-block列表布局

必要条件：

1：现代浏览器下的首尾标签留空或换行

像这样：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
 </span> <span>
    <a href="#">
        <img src="test.jpg" />
    </a>
 </span> 

2：IE6/7浏览器

inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。

结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。应该是这个样子滴：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
    <span>描述</span></span>
注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。
 
总结如下：
各个浏览器实现text-align:justify下的两端对齐布局注意事项表
IE6 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE7 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE8 列表元素间换行或留空、列表元素的环境字体大小不能为0
现代浏览器 列表元素间换行或留空
 
然后样式这样设置，外层元素的样式：text-align:justify;列表元素的样式：display:inline-block;

 

以下是demo：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-jusyify下的inline-block自适应列表布局末行对齐修复</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
* {
 font-size:12px;
}
.box {
 width:50%;
 padding:20px;
 margin:0 auto;
 background-color:#f0f3f9;
 text-align:justify;
}
.list {
 width:120px;
 display:inline-block;
 padding-bottom:20px;
 text-align:center;
 vertical-align:top;
}
.justify_fix {
 display:inline-block;
 width:100%;
 height:0;
 overflow:hidden;
}
</style>
</head>
<body>
<div id="main">
  <div id="body" class="light">
    <div id="content" class="show">
      <div class="demo">
        <div class="box"> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="justify_fix"></span> </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>


 
 
分享到：
| jquery detach方法的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics