我正在嘗試使用一些圖像在某些文本的兩側(cè)制作垂直橫幅。我目前正在使用填充來將文本保持在適當(dāng)?shù)奈恢茫蚁Ｍ趫D像放置時忽略填充，而不是文本。目前，圖像要么是文本的一部分，要么將文本進(jìn)一步推向錯誤的方向。.body{ padding-left: 20%; padding-right: 20%; font-size: 20px; list-style-type: none; color: #231427;}.body > .images{ padding-left: -20%; padding-right: -20%; font-size: 20px; list-style-type: none; color: #231427;}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p><br><div class="images"> <img src="img/IMG_3502.JPG" alt="W. Jons Property" width="170px"></div>
1 回答
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗 獲得超10個贊
flex您可以根據(jù)您的要求使用。
.body {
padding-left: 20%;
padding-right: 20%;
font-size: 20px;
list-style-type: none;
color: #231427;
}
#MainDiv {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.images {
margin: 10px;
font-size: 20px;
list-style-type: none;
color: #231427;
}
<div id="MainDiv">
<div class="row">
<div class="images">
<img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
<br>
</div>
<div class="row">
<div class="images">
<img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
<br>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消