Question

我在向段落标记添加边距和填充时遇到问题。我怀疑它与我的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;    
}

EDITED

如您所见，段落块从包装器开始，而不是在图像旁边 View in Developer Tool

Answer 1

您遇到此问题的原因是您已将display: inline属性分配给.section p选择器。要么你必须摆脱它或使用display: inline-block。这可以解决您的问题。试试这段代码。

.section p {
    padding: 0 40px;
    margin-left: 100px;
    text-align: justify;
}

Answer 2

UPDATE 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>

使用float添加边距/填充到元素

2 个答案: