文本不换行，而是选择进入答案

【问题标题】：Text not wrapping, instead opts to go under文本不换行，而是选择进入
【发布时间】：2016-10-22 00:04:49
【问题描述】：

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

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

标题是块元素
图片是一个内嵌块元素
文章是一个内嵌块元素

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上

【问题讨论】：

标签： html css

【解决方案1】：

使图片成为文本容器内的浮动元素，然后文本将浮动在它旁边（如果它更长，则在它下方）

【讨论】：

添加浮动：左；到 .newsboard_topic_picture。不工作。
你有没有把它放到.newsboard_topic_article <p> 标签中，就像我写的那样？
是的。试着把 float:right;进入 .newsboard_topic_article，让情况变得更糟。
不，ptag 上没有浮动 - <img> 标签（带有float: left）必须在<p>tag 内（没有浮动，但display: block！）
好的。新的 HTML 代码：#newsboard { margin-left: 100px;右边距：100px；边距顶部：25px；边距底部：25px；边框颜色：#0099FF；边框样式：实心；边框宽度：5px； } .newsboard_topic { 填充：20px;显示：块； } .newsboard_topic_article { 显示：内联块；垂直对齐：顶部； word-wrap：断词；边距：0px；填充：10px； } .newsboard_topic_picture { 显示：块；向左飘浮; }

【解决方案2】：

分离你的newsboard_topic 类。

    <div class=newsboard_topic>
        <img src="/image/newsboard/construction.gif" alt="Dev">
        <h1>Website in Development!</h1>

    </div>

 <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>

然后给你的newsboard_topic 类一个display:flex;。

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

【讨论】：

【解决方案3】：

我认为没有人愿意给出的明显答案是......引导程序。如果您正在学习编码，我强烈建议您从一些可用的优秀开源解决方案中学习。

<div class="row">
    <div class="col-md-5">
        <h1>Website in Development!</h1>
        <img src="/image/newsboard/construction.gif" alt="Dev">
    </div>
    <div class="col-md-5">
        <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>

【讨论】：