Question

我正在尝试将图像浮动到左侧，将图像包裹在图像周围，并使用浮动和清除属性将位置浮动到左下角：https://jsfiddle.net/darf4ama/5/

    <aside>
        <h2>Photo Posts</h2>
        <p><a href="http://lorempixel.com/100/100/animals/" title="Image Title" target="_blank"><img src="http://lorempixel.com/200/300/animals/" alt="Image Title"></a></p>
        <p>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>
        <p>Image</p>
    </aside>

aside img {border: 2px dotted yellow; float: left;}

aside:first-of-type p:first-of-type {border: 2px dotted blue;}
aside:first-of-type p:nth-of-type(2) {border: 2px dotted green; float: left; overflow: auto;}
aside:first-of-type p:last-child {border: 2px dotted red; float: left; clear: both; font-style: italic;}

我认为我已经浮动了图像和位置并正确清除了这两个属性。但是我似乎无法浮动并清除第2段。我在这里做错了什么？

Answer 1

Float确实改变了元素的行为你可以考虑使用弹性盒子如果你想让图像和段落彼此相邻并且有一个边距

检查以下代码段

＆＃13;

aside{
  display:flex;
  border:1px solid red;
}

aside img {border: 2px dotted yellow; }
aside p:nth-child(2){ 
  margin:10px;
  border:2px solid green;
}

＆＃13;

 <h2>Photo Posts</h2>
<aside>
       
        <p>
          <a href="http://lorempixel.com/100/100/animals/" title="Image Title" target="_blank"><img src="http://lorempixel.com/200/300/animals/" alt="Image Title"></a>
  </p>
  
        <p>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>
        
    </aside>

<p>Image</p>

＆＃13;

希望这有帮助

CSS浮动图像和文本包装

1 个答案: