如何将文字移到图片旁边

xDrMaLeK

您已经建立了一个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

我想要红色框中的文字

维拉

使用flex到容器。

尝试这个。如果希望它们居中，也可以使用align-items：center

还要将设置order:2为，section以使其浮动到右侧

尝试这个

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。