html - img 不能作为带有显示的块：以我想象的方式阻止

Question

我是新来的。我正在做一个项目，我正在尽我所能理解花车以及它们与其他事物交互的方式等。我学到了很多东西，但有些事情让我很难过。我做了一个简单的练习笔，这样我就可以在不弄乱我的主要项目的情况下进行测试。我的主要问题与 img 与左浮动交互的方式有关。它没有像我实验中的 div 红色框那样在它下面，而是在它的右侧。我认为因为 img 像文本一样是内联的，所以它试图像我以前看到的那样环绕框。我想也许 img 会与类似于文本的浮动交互。在正常的文档流中，如果我在蓝色框上方有红色框，然后我将红色框向左浮动，则蓝色框将像任何块元素一样位于红色框下方。如果我在红色框下方尝试使用 img，则 img 将移至红色框的右侧。这并不让我感到惊讶，因为 img 是内联的。我不明白的是，当我将 img 显示为块时，它的功能完全相同，没有任何变化。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。img 只会转到红色框的右侧。这并不让我感到惊讶，因为 img 是内联的。我不明白的是，当我将 img 显示为块时，它的功能完全相同，没有任何变化。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。img 只会转到红色框的右侧。这并不让我感到惊讶，因为 img 是内联的。我不明白的是，当我将 img 显示为块时，它的功能完全相同，没有任何变化。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。因为 img 是内联的，所以我不会感到惊讶。我不明白的是，当我将 img 显示为块时，它的功能完全相同，没有任何变化。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。因为 img 是内联的，所以我不会感到惊讶。我不明白的是，当我将 img 显示为块时，它的功能完全相同，没有任何变化。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。如果我将它显示为块，它不应该像蓝色框作为块一样作为块工作，然后进入并被浮动的左侧红色框覆盖吗？另外，我已经尝试过，没有将 img 放入 div 容器中。我认为通过将 img 放在 div 中，它可能会通过 div 起到块的作用，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。它可能通过 div 充当一个块，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。它可能通过 div 充当一个块，但这对我也不起作用。我认为这是因为我在 div 和 img 上都需要某种定位。我知道这里有几个问题，但如果有人能帮助我理解这一点，那就太好了。谢谢你。

.redbox { background-color: red; height: 200px; width: 200px;float: right} .bluebox { background-color: blue; height: 200px; width: 200px; float: left;} .greenbox { background-color: green; height: 200px; width: 200px;}.divpadding { padding: 20px; background: yellow; } img {display: block;}

https://codepen.io/WitlessMean/pen/QWwpgYj?editors=1100

标签： htmlcss

Answer 1

欢迎来到 SO。

我看得出来，你对此想了很多，也有很大的热情，但是——我们真的不能跟上！:)

这里有一些提示可以帮助您获得最佳答案：https ://stackoverflow.com/help/minimal-reproducible-example

以下是关于您的问题的一些说明： https ://jsfiddle.net/sheriffderek/f47ox32g/

...

这几乎是您想要使用浮动的唯一原因 - post-flex-box。我选择思考它的方式......不是他们想象“向左浮动” - 而是它允许其他内容在它周围浮动。这有帮助吗？需要明确的是......我已经好几年没有使用浮点数了......所以 - 也许它不是适合你的工具？

.example-area {
  max-width: 300px; /* to prove the point */
  border: 1px solid blue;
}

.example-area img {
  float: left; /* let things float around it... */
  margin-right: 10px; /* just to give it some space */
}

.example-area p {
  margin: 0;
}

<section class="example-area">

  <img src="https://placehold.it/100x80" />

  <p>Example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam ex blanditiis esse iure doloribus perspiciatis ipsum necessitatibus earum officia error iste cupiditate, nihil consequatur dolorum incidunt nisi molestias modi!</p>
  
</section>