Div 未在浮动元素下方调整大小

Question

我遇到了一个问题，即 div 在被其他内容下推后无法调整大小。我附上了一个例子。单击“切换内容”按钮以查看问题。如果您调整浏览器的大小，则 div 将恢复为全宽。有没有办法解决这个问题？

我还提供了一个屏幕截图来显示该行为，因为它似乎并非在所有浏览器上都发生。它在 Safari 中始终如一地发生。当您按下“切换内容”按钮时，最后一个 div“4)”不会展开，除非您调整浏览器的大小。

document.getElementById("button").onclick = function() {
  var display = document.getElementById("two").style.display == "none" ? "block" : "none";
  document.getElementById("two").style.display = display;
  document.getElementById("three").style.display = display;
}

#float
{
  float:left;
}
#float > img
{
  float:left;
  width: 300px;
  height: 300px;
}
.content
{
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
}

<button id="button">Toggle Content</button>
<br><br>
<div id="float"><img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201703170823"></div>
<div class="content">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="two" class="content" style="display: none">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="three" class="content" style="display: none">3) 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.</div>
<div class="content">4) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Answer 1

将所有 content divs 包装在父 div 中：

<div>
    <div class="content">1) Lorem ipsum dolor</div>
    <div id="two" class="content" style="display: none">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div id="three" class="content" style="display: none">3) 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.</div>
    <div class="content">4) 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</div>
</div>

这看起来像是一个浏览器错误，其中移动的div 没有被重新绘制，可能是因为它没有被识别为已更改。

将整个组包装在父级 div 中似乎可以通过在更改所有子级时触发所有子级的适当调整大小/重绘来解决此问题。

Answer 2

如果我理解正确，你会问这里需要全宽的底部 div。

您使用“溢出：隐藏”的能力来忽略浮动而不是清除它们。但是你用'overflow：hidden'将每个段落包装在一个单独的div中，这使得它们尽可能多地占用空间，因为它们独立设置它们的宽度。

要将它们的宽度限制为第一段的值，您应该将它们包装在 one common 容器中，并带有“溢出：隐藏”。这是一个example in JSFiddle，我添加了'.content-wrap'类：

.content-wrap
{
  overflow: hidden;
}

但我认为更流行的问题解决方案是向浮动的父级添加左填充，然后向浮动添加负左边距以将其移动到左边缘（参见JSFiddle）。

Answer 3

1. 替换边距：10px； in .content to margin: 10px 10px 10px 310px;

   或

2. 在 div "#float" 之后创建新的 div "#contents" 并将其添加到 css "overflow: hidden;" 中并放入所有 .content 元素

   或

3. 使用CSS Grid