怎么让图片和文字并列呢试了好几种办法都有问题

太谢谢了！！解决啦
又有一个问题是网页缩小时怎么让文字回到下面呀

是不是post-note的宽度太宽了，加上图片的宽度会大于外面盒子的宽度，所以浮动上不去！
我试了一下，如果宽度足够是可以上去的

main{
            width: 800px;
            height: 500px;
            background-color: aquamarine;
        }
        main>div{
            float: left;
        }
        main>div:nth-of-type(1){
            width: 400px;
        }
        p{
            width: 150px;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }

<main>
    <div><img src="img/timgdw.gif"></div>
    <div>
        <h3>ddddddddddwdwad</h3>
        <span>dwwwwwwwwwwwwwwwwwwwwwwww
            <p>dddwdwddwfffffffffffffffffffffffddddddddddddddddddddddddddddddddddddddddddff</p>
        </span>
    </div>
</main>

在main标签下加一个div，将包含图片和文字的div包起来，且设定其外层div的style="display:flex;"

**************第二个问题**************

如果想在页面缩小时，改变原有视图，就需要动态设置样式，可以利用@media属性，类似如下：

@media (max-width: 480px){
    .phone{
        display: none;
    }
}

设置最小宽度，当页面缩小到最小宽度以下时，改变最外层div的样式，把display改为none，即一个正常显示的（样式为display:flex），一个页面缩小时显示的（样式为display:none）