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，以使其浮动到右侧

尝试一下

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

Answer 2

使用display:flex到article

.contentmqal {
    width: 80%;
    float: left;
}

article {
display:flex;
    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">
 <article>
 <img src="image/a1.jpg" alt="Durain Fruit" title="One Year ago: Durian Fruit" width="238px" />
 <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>

 </article>
</div>

如何将文字移到图片旁边

2 个答案: