如何在浮动元素旁边添加边距

Question

我在 2 个块浮动元素之间有文本，我想在 p 段落内的 quote id 元素的右侧添加一个额外的缩进。问题是 margin-left 在 float 元素旁边不起作用，如果我使用 position: relative 方法，如所示示例，那么文本将剪裁右侧的浮动块。有没有办法将 quote 文本向右移动而不进行剪裁？

#left-block{
  height: 150px;
  width:50px;
  float: left;
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  float: right;
  background-color: #000;
  margin-left: 10px
}

#quote{
  position: relative;
  left: 30px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="left-block"></div>
  <div id="right-block"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
  <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
    Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>

</body>
</html>

编辑：

有关确切示例，您可以查看 en.wikipedia.org/wiki/Hercules 行 Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: 您可以看到后面的缩进文本基本上位于 2 个浮动图像之间。

Answer 1

保证金应用正确。问题是你的块在你的 html 之前，你应该在它之后。因此，对于您要实现的目标，最好使用 display:flex

所以我通过放置一个“容器”并应用 flex 来重组您的 html。然后，我把你所有的 p 放到一个 div 中，然后把右边的方块放在下面。

当您将 left 添加到 #quote 时，您也需要调整它的 width。

所以我可以删除你的浮动。

演示

#left-block{
  height: 150px;
  width:50px;
  /*float: left;*/
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  /*float: right;*/
  background-color: #000;
  margin-left: 10px
}

#quote{
  position: relative;
  left: 30px;
  width: calc(100% - 30px);
}

.d-flex{
  display:flex;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="d-flex">
    <div id="left-block"></div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
      <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
      <p>
        Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
    </p>
    </div>
    <div id="right-block"></div>
  </div>

</body>
</html>

Answer 2

您可以使用边距，但该值必须大于浮动元素的宽度，因为边距是从父元素的一侧测量的，而不是考虑浮动元素：

（顺便说一句，不需要相对位置）

#left-block{
  height: 150px;
  width:50px;
  float: left;
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  float: right;
  background-color: #000;
  margin-left: 10px
}

#quote{
  margin: 0 100px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="left-block"></div>
  <div id="right-block"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
  <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
    Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>

</body>
</html>

Answer 3

因此，不完美但有效的解决方案是简单地将 overflow: hidden 添加到 quote 元素中。解释好像写在这里

唯一的问题是，一旦低于块高度，它就不会向左移动文本，如下例所示。

#left-block{
  height: 150px;
  width:50px;
  float: left;
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  float: right;
  background-color: #000;
  margin-left: 10px
}

#quote{
  overflow: hidden;
  padding-top: 40px;
  padding-left: 40px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="left-block"></div>
  <div id="right-block"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
  <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
    Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>

</body>
</html>

如何在浮动元素旁边添加边距

How to add margin next to a float element

css

css-float

演示