html - 怎么把文字移到图片旁边

Question

您已经构建了一个 HTML 页面和一个文章，但它出现在图像中减去图像和文本之间的空间

我想让文字紧挨着图片，这样它的形状就与众不同

html:

/* Start content Article .. */

.contentmqal {
    width: 80%;
    float: left;
}

article {
    margin: 15px;
    background: #f7e9e3;
    border-radius: 8px;
    padding: 8px;
}

article section {
    float: right;
    clear: left
}

article section p {
    font-family: 'Source Sans Pro', sans-serif;
}

            <div class="contentmqal">
            <!-- Start Content Article -->
            <article>
                <section>
                    <h3>One Year ago: Durian Fruit</h3>
                    <p>The durian is a tropical fruit. It is from Malaysia. People know it for its sharp smell. Some people say... <span>read more</span></p>
                </section>
                <img src="image/a1.jpg" alt="Durain Fruit" title="One Year ago: Durian Fruit" width="238px" />
            </article>
            </div>
<!-- End Content Artcle -->

http://prntscr.com/lo22wh

我想要红框里的文字

Answer 1

对容器使用flex。

试试这个。如果你想让它们居中，也可以使用 align-items:center

同时将 order:2 设置为 section 使其 float 到右侧

试试这个

/* Start content Article .. */

.contentmqal {
    width: 80%;
    float: left;
}

article {
    margin: 15px;
    background: #f7e9e3;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
}

article section {
    float: right;
    clear: left;
    order: 2;
}

article section p {
    font-family: 'Source Sans Pro', sans-serif;
}

            <div class="contentmqal">
            <!-- Start Content Article -->
            <article>
                <section>
                    <h3>One Year ago: Durian Fruit</h3>
                    <p>The durian is a tropical fruit. It is from Malaysia. People know it for its sharp smell. Some people say... <span>read more</span></p>
                </section>
<img src="image/a1.jpg" alt="Durain Fruit" title="One Year ago: Durian Fruit" width="238px" />
            </article>
            </div>
<!-- End Content Artcle -->