不在浮动元素下面调整大小

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中的所有div 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在这里占全宽。

你使用＆溢出的功能：隐藏＆＃39;忽略浮动而不是清除它们。但是你将每个段落包含在一个单独的div中，并使用＆溢出：隐藏＆＃39;这使得它们可以占用尽可能多的空间，因为它们可以独立设置宽度。

要将宽度限制为第一段值，您应将它们包装在一个常见的容器中，并使用＆溢出：隐藏＆＃39;。这是一个example in JSFiddle，我添加了＆＃39; .content-wrap＆＃39;类：

.content-wrap
{
  overflow: hidden;
}

但我认为更常用的问题解决方法是将左边距添加到float的父节点，然后向float添加一个负左边距以将其移动到左边缘（请参阅JSFiddle）。 / p>

Answer 3

替换保证金：10px; in .content to margin：10px 10px 10px 310px; 要么 创建新的div #### contents＆＃34;在div＆＃34; #float＆＃34;之后并将其添加到css＆＃34;溢出：隐藏;＆＃34;并放入所有.content元素 要么 使用CSS网格