html - 文本不换行，而是选择下行

Question

我的问题
所以我正在尝试为我的网站创建一个新闻版 block 。每个部分都包含标题、图像和文章本身。问题是除非我使用 <br>，否则文章文本将拒绝显示在图像旁边。我自己把它拆了。

描述
每个部分的所有元素都列在一个 div 元素下。该部分包括标题、图像和文章。之后，图片有自己的类，文章也有自己的 CSS。

1. 标题是 block 元素
2. 图片是行内 block 元素
3. 文章是行内 block 元素

HTML 代码(从不包括导航栏及以上的新闻框开始)

<div id=newsboard>
    <div class=newsboard_topic>
        <h1>Website in Development!</h1>
        <img src="/image/newsboard/construction.gif" alt="Dev">
        <p class=newsboard_topic_article>
            Greetings!
            <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
            <br>- Geo Jones 
            <br>Owner and Developer
        </p>
    </div>
    <div class=newsboard_topic>
        <h1>kimmy and donald!</h1>
        <img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald">
        <p class=newsboard_topic_article>
            The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopepd it. This is a test by the way to test the standing of articles.
        </p>
    </div>
</div>

HTML 部分的 CSS 代码

#newsboard {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-color: #0099FF;
    border-style: solid;
    border-width: 5px;
}

.newsboard_topic {
    padding: 20px;
    display: block;
}

.newsboard_topic_article {
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    margin: 0px;
    padding: 10px;
}

.newsboard_topic_picture {
    display: inline-block;
}

实例目前在 geo-village.com 上可用

Answer 1

使图片成为文本容器内的 float 元素，然后文本将 float 在它旁边(如果它更长，则在它下面)