在 Sitefactory 的页面制作中，准备在模板中调用“带图片内容列表_文章_普通式.config”这个标签实现左图右文字的样式，实现效果如下图所示：
为了尽可能不改动“带图片内容列表_文章_普通式.config”标签，在模板中给标签外围加了<div class="pic_art"> 的区块，以方便利用包含选择符的方式进行定位控制，结构代码如下：
<div class="pic_art">
<h5><a href="/yaoyuan/Fairytales/">更多</a>童话与童画</h5>
{PE.Label id="带图片内容列表_文章_普通式" parentid="79" arrnodeid="31" includechild="true" specialid="0" shownum="10" ishot="false" iselite="false" datenum="0" ordertype="{PE.Label id="取得栏目下的内容排序方式" nodeid="31" /}" imgwidth="50" imgheight="50" titlelen="20" contentlen="52" showtips="false" urltype="0" hits="0" elitelevel="0" span="" class="" /}
<h5><a href="/yaoyuan/Words/index.html">更多</a>童言无忌</h5>
{PE.Label id="带图片内容列表_文章_普通式" parentid="79" arrnodeid="32" includechild="true" specialid="0" shownum="10" ishot="false" iselite="false" datenum="0" ordertype="{PE.Label id="取得栏目下的内容排序方式" nodeid="32" /}" imgwidth="50" imgheight="50" titlelen="20" contentlen="52" showtips="false" urltype="0" hits="0" elitelevel="0" span="" class="" /}
</div>
Sitefactory 的“带图片内容列表_文章_普通式.config”标签中最终生成<div class="pe_u_thumb">和<div class="pe_u_thumb_title">二个区块，以控制图片和标题二个内容。生成的代码如下：
<div class="pic_art">
<h5><a href="/yaoyuan/Fairytales/">更多</a>童话与童画</h5>
<ul><li><div class="pe_u_thumb"><a href="/yaoyuan/Fairytales/29.html"><img class="pic2" src="/UploadFiles/Life/2008/9/200809222053355847.jpg" width="50" height="50" alt="涂鸦人生（A PORTRAY LIFE）" border="0" /></a></div><div class="pe_u_thumb_title"><a href="/yaoyuan/Fairytales/29.html">涂鸦人生（A PORTR...</a><br />一本漫画书里写道：“如果你发现了喜爱的事物，请它...</div></li></ul>
<h5><a href="/yaoyuan/Words/index.html">更多</a>童言无忌</h5>
<ul><li><div class="pe_u_thumb"><a href="/yaoyuan/Words/12.html"><img class="pic2" src="/UploadFiles/yaoyuan/2008/9/200809200942058260.jpg" width="50" height="50" alt="小姚远趣语录" border="0" /></a></div><div class="pe_u_thumb_title"><a href="/yaoyuan/Words/12.html">小姚远趣语录</a><br />姚远是谁？就是我儿子啦，出生月日很好记：2月22日，...</div></li></ul>
</div>
按前面在《左中右三种页面布局样式备忘》中的研究，只要将左侧的<div class="pe_u_thumb">区块浮动于左侧（float: left;），右侧的<div class="pe_u_thumb_title">区块不浮动但以左缩进挪让（margin: 0px 0px 0px 100px;），就可以实现左右布局，应该是非常简单的定位。CSS 代码定义如下：
.pic_art h5{
padding: 0px;
font-family: Arial, "微软雅黑", "宋体", Helvetica, sans-serif;
line-height: 36px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.pic_art{
overflow: hidden;
height: 100%;
}
.pic_art li{
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #eee;
}
.pic_art .pe_u_thumb{
float: left;
width: 82px;
height: 62px;
}
.pic_art .pe_u_thumb img{
width: 80px;
border: 1px solid #fff;
}
.pic_art .pe_u_thumb_title{
margin: 0px 0px 0px 100px;
height: auto;
text-align: left;
}
.pic_art .pe_u_thumb_title a{
color: #2B93D2;
display: block;
}
但在前台访问时出现了一个很奇怪的现象：在 IE 浏览器下，右侧的<div class="pe_u_thumb_title">这个区块始终不能与左侧的<div class="pe_u_thumb">区块顶部对齐（如下图所示），但是在 Firefox 下浏览又没有这个问题：
是不是右侧的<div class="pe_u_thumb_title">在原有 CSS 中有冲突（比如定义了它的外边界的值）？于是给 .pe_u_thumb_title 定义外边界和内缩进都为 0px（margin: 0px;、padding: 0px;），但没效果。甚至给 .pe_u_thumb_title a 的外边界和内缩进也同样定义为 0px，还是没有效果。很是奇怪，从原理上并没有什么出错的地方。
再细细查查 CSS 定义，也没发现哪出错。静下心来细想想，这二个区块都是在 li 里面，会不会是 IE 中对 li 的解析有问题？在 li 里面二个区块在浮动和非浮动状态下右侧非浮动的<div class="pe_u_thumb_title">找不到 li 的边界？解决这问题最简单的方法是给 li 加上 overflow 定义：
.pic_art, .pic_art li{
overflow: hidden;
height: 100%;
}
再测试页面，IE 下上述问题已经解决了：
在 li 里面进行浮动定位时，要注意这个问题，否则在 IE 中就会出现很多不符合逻辑的现象。
