向带有浮动的元素添加边距/填充

debugcn 发表于 Dev

德克斯特·西亚

我在为段落标签添加边距和填充时遇到问题。我怀疑这与将我的 img 元素向左浮动有关。在保留图像右侧的段落的同时，我尝试在我的 p 标签上添加左右填充，因为它不接触包装器和 img

<body>
<div class="wrapper">
    <div class="section">
        <img src="about.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus et neque non volutpat. Aliquam ut pharetra ante. Proin cursus aliquam posuere. Quisque vitae ligula a lectus feugiat elementum. Pellentesque sodales arcu sed tortor dapibus, ut ultricies nibh ultricies. Vivamus accumsan gravida hendrerit. Vivamus nec ornare velit, quis volutpat velit. Fusce consectetur sagittis metus, et molestie mauris consequat at. Cras fermentum, ligula at vestibulum eleifend, leo turpis cursus libero, non porttitor diam tortor eu turpis. Nulla sodales velit metus, sit amet consectetur leo dapibus vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

*{
margin: 0;
padding: 0;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    background-color: blue;
}

.section img {
    float: left;
}

.section p {
    padding: 0 40px;
    display: inline;
    text-align: justify;
}

.section:after {
    content: "";
    display: block;
    clear: both;    
}

已编辑

如您所见，段落块从包装器开始，而不是在开发人员工具中的图像视图旁边

德克斯特·西亚

2019 年更新

使用 FlexBox 更轻松地定位元素

类似于上面使用 flexbox 的设计，它可以通过这样完成

.parentFlex {
  display: flex;
}

.childflex {
  width: 30vw;
}

.secondChildflex {
  width: 70vw;
  padding: 1rem;
}

<div class="parentFlex">
  <div class="childflex"><img src="image" alt=""></div>
  <div class="secondChildflex">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem vero iure deleniti enim ratione iste, illum facilis non magni nostrum, repellendus error placeat blanditiis, veritatis quidem consequuntur molestias deserunt necessitatibus!</div>
</div>

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

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