哇塞！看到这个题目或许就让人糊涂……连paperen自己都看不懂是什么意思，“更正孤儿”其实这是一个关于css布局的问题，例如你想做一个效果是，左边是一张小图片右边是一堆文字，就是半图半字的布局，那么这篇或许正是你需要的。?

在paperen琢磨自己新设计的皮肤时，也抽点空先尝试一下设计图中一些布局中的css技巧，而也正是有使用这个布局的地方，而在sohtanaka的博客那也找到了一篇关于这个css技巧的文章，而文章名字就是Correcting Orphans，paperen所以在这里也用了这个名字，所谓站在巨人肩膀上嘛~~?

解决方法1：sohtanaka说的?

sohtanaka的博文连接为：http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/

自己做的例子为：http://paperen.com/demo/correcting-orphans/?

大家可以先看下他写的。下图为一个例子。?

显然这个并不是我们想要得到的效果，左边还有文字，并且是在右边的文字高度高于左边的图片是就会自动将多余的内容放到左图的下方。而我们想要的效果就是左边与右边独立开，左图右字。?

他举得例子的html结构：

<img src="your_image.jpg" class="thumb" />
<div class="description">
    <h3>Heading 1</h3>
    <p>Paragraph goes here...</p>
    <p>Paragraph goes here...</p>
</div>

css:

.thumb {
    float: left;
    margin: 5px 20px 20px 0;
    padding: 5px;
    border: 1px solid #ccc;
    background: #f0f0f0;
}
.description {overflow: hidden;}

而paperen在看了他的解决办法后觉得有点疑惑的是，要将右边的区块加上overflow: hidden;实在有点想不通，设置溢出为隐藏为什么就将本来跨到左边来的字乖乖地回到右边，嗯……实在想不明白其中的原理，这个要问写浏览器的那个程序员么……算了，就当是一个css技巧，记住吧。?

不过有看他这篇文章评论的人会发觉其中有个叫webangel78人说“Unfortunately it does’t work in IE6.”哎……又是可恶的ie6。而之后sohtanaka又放出ie6下的解决办法。?

*html .description {float: left;}

换言之完整的css代码为：

.thumb {
??? float: left;
??? margin: 5px 20px 20px 0;
??? padding: 5px;
??? border: 1px solid #ccc;
??? background: #f0f0f0;
}
.description {overflow: hidden;}
*html .description {float: left;}?

?

解决办法2：smashingmagazine网站已经有现成的结构，不过没有提到是如何实现的?

好在paperen记忆力还算不错，记得这个网站也有使用到这种布局，所以又上这个网站研究一下，想看看他的实现是不是与sohtanaka说的一样。?

使用firebug（Firefox浏览器的一个超BT的插件）或者opera中的开发者工具就可以研究所有网页甚至随意更改……所以才说BT。看到他的样式并不是如sohtanaka说的办法，嗯，又多了一种方法，多么兴奋，paperen又可以发表一篇文章了！真好……废话少说……?

html结构：

<div class="container">
 <div class="pic_thumb">
  <img src="life.png" alt="" title="" />
 </div>
 <div class="entry">
 hello,i am paperen
 </div>
</div>

css：

.container{
?width:500px;
?margin:5% auto;
?clear:both;
?height:auto;
}
.pic_thumb{
?float:left;
?padding:0px 10px 10px 10px;
}
.entry{
?line-height:1.7em;
?margin-left:162px;
}

对比于sohtanaka那个办法，这个办法兼容ie6，貌似也挺不错，而这个办法paperen倒是明白了，让左边包住图片的容器左浮动，从而理论上是脱离了整个container容器，而让装右边文字的容器离container的左距离刚好大于或等于左边pic_thumb的宽度，就行了。?

不管怎样说，两个方法任选一个吧，都不错的，你自己看着办吧~~paperen个人喜欢第二种方法。