Question

是否有精确的方法让段落的顶部和左侧围绕浮动的img流动以对齐。当我放大并使用开发人员工具时，它们并不完全对齐但非常接近。

    * {
      box-sizing: border-box;
    }
    .contain {
      width: 500px;
      margin: 0 auto;
      background-color: silver;
    }
    .box {
      width: 200px;
      height: 100px;
      background: blue;
      float: left;
      margin: 15px 15px 0;
    }
    p {
      padding: 15px;
    }

<section class="contain">
  <div class="box"></div>
  <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. 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</p>
</section>

Answer 1

它可以那样工作。

＆＃13;

    * {
      box-sizing: border-box;
    }
    .contain {
      width: 500px;
      margin: 0 auto;
      background-color: silver;
    }
    .box {
      width: 200px;
      height: 100px;
      background: blue;
      float: left;
      margin: 15px 15px 0;
    }
    p {
      padding: 15px;
      width: calc(100% - 215px);
      margin-left: 215px;
    }

＆＃13;

<section class="contain">
  <div class="box"></div>
  <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. 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</p>
</section>

＆＃13;

Answer 2

只需将overflow:hidden放在<p>标记上即可

＆＃13;

* {
  box-sizing: border-box;
}

.contain {
  width: 500px;
  margin: 0 auto;
  background: silver;
}

.box {
  width: 200px;
  height: 100px;
  background: blue;
  float: left;
  margin: 15px 15px 0;
}

p {
  padding: 13px 15px;
  overflow: hidden;
  /*   text-align: justify; */
}

＆＃13;

<section class="contain">
  <div class="box"></div>
  <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. 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.</p>
</section>

＆＃13;

将段落与浮动元素对齐

2 个答案: