我正在尝试使用一些图像在某些文本的两侧制作垂直横幅。我目前正在使用填充来将文本保持在适当的位置，但我希望在图像放置时忽略填充，而不是文本。目前，图像要么是文本的一部分，要么将文本进一步推向错误的方向。.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贡献1796条经验 获得超10个赞
flex您可以根据您的要求使用。
.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 关注
- 41 浏览
添加回答
举报
0/150
提交
取消