在我的 html 中，我有這個：
<section class="mysection">
<img src="/images/pic.png"/>
<div class="content">
<p class="paragraph">
some paragraphs here....
</p>
</div>
</section>
在我的 CSS 中，
.mysection{
display: flex;
flex-direction: row;
}
.paragraph {
display: flex;
flex-direction: column;
}
.content {
padding: 20px;
}
.mysection img{
border-radius: 50%;
width: 200px;
height:200px;
}
這在左邊生成了一個影像，在右邊生成了一個文本，如下所示：
但是你可以看到，如果段落變長，它只會繼續向下流動，并將影像推得更小。有沒有辦法讓它在段落變長時，它只會流動和填充而不將影像推得更小？這就是我的意思：
任何幫助表示贊賞，謝謝！
uj5u.com熱心網友回復：
讓文本在影像下方流動的一種直接方法是取消使用 flex 及其列，而是將影像浮動到左側。
.content {
padding: 20px;
}
.mysection img {
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
background-color: lightblue;
}<section class="mysection">
<img src="/images/pic.png" />
<div class="content">
<p class="paragraph">
some paragraphs here...."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/322253.html
上一篇：如何在PHPMailer主題欄位中插入圖示??或影像
下一篇：在html表格的幫助下創建圖片庫