html - 尝试让我的文本始终具有相同的宽度，即使我的 div 有更多可用空间

Question

我的图片右侧有一张图片和一些文字。

而且我有很多文字，所以我的文字超过了图像的高度，然后我的文字就会在图像的左侧。

但我希望当我的文本超过图像高度时，我希望我的文本继续保持相同的宽度并对齐，就像当我的文本不超过我的图像高度时一样。

为了更好地解释，我想要这个:

不是这个:

但是第二张图片是我的，你知道我怎么解决这个问题吗？

我的 fiddle 展示了我拥有的东西:http://jsfiddle.net/43JN5/2/

这是我的 html:

<div>
    <h3>Title of my first post!</h3>    
    <div id="teste">
        <img class="img" style="width:170px;height:170px; float:left;" src="" />
        <p style="background:#fff;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem .
            <br />They are good for:<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

    </div>    

还有我的CSS:

#teste
{   
    text-align:center;
    margin:0 auto 0 auto;
    background:#fff;
}

#teste .img
{
    width:200px;
    height:220px; 
    float:left;
    margin-right:10px;
    border:5px solid red;
    margin-top:15px;

}

#teste p
{
    font-size: 17px;  
    text-align:justify;
    line-height:25px;
    word-spacing:-2px;
    width:100%;
    margin-top:15px;
    min-height:240px;
}

Answer 1

一种方法是将 display:table-cell; 和 vertical-align:top; 应用于图像和文本。

jsFiddle example