3个div不对齐

Question

我创建了一个论坛，但我遇到了问题：

以上工作不错，但当我缩小页面大小时，问题出在此处：

如果我设置为文字：

width:auto; 

对于父母：

white-space:nowrap;

虽然有效，但word-wrap: break-word;无效:(

我希望图片在左边，没有下面的文字。

https://jsfiddle.net/39w1tkp2/1/

Answer 1

.posttext {

    display: inline; /*instead of inline-block*/

}

因为div.posttext的宽度没有足够的空间来放置元素。 如果您将其更改为显示：inline; （标准是块）它将有足够的空间放置它们之间。在this link中查找也了解块和内联之间的区别..

编辑：用户要求提供更多解决方案＃1 img父div：给出最小高度为400px;文本将在400px后流回左侧;

编辑：用户要求提供更多解决方案＃2（尚未完全测试，缺少可用时间，对不起））

.posttext {

    display: table; 

}

Answer 2

要创建化身所在的文本左侧的列，而下方没有文字......

.posttext{
    word-wrap: break-word;
    display:block; // change to block
    padding-right:5px;
    width:auto; 
    padding-left: 120px; // pad left
}

<强> Demo

Answer 3

@Derpolino

从 posttext 和 userpost

中删除display: inline-block