Question

我的问题
所以我想为我的网站创建一个新闻栏目。每个部分都包含标题，图像和文章本身。问题是文章文本将拒绝在图像旁边，除非我使用<br>自行分解。

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

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

HTML代码（从新闻栏开始，不包括NAV BAR及以上）

<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

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

Answer 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;
}

Answer 3

我认为没有人愿意给出明显的答案，这会让你的编码更加顺畅...... Bootstraps。如果您正在学习编码，我强烈建议您学习一些优秀的开源解决方案。

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

文字未换行，而是选择置于

3 个答案: