我不知道如何清除我的 3 个 div 列下方的内容——其中每个 div 列包含一个带有一些居中文本的跨度和一个位于跨度下方的文本区域。问题是，或者至少我认为，是 div 标签是 float 的，而我没有正确清除它们。
发生的事情是 Firefox 将我的下一个元素 float 在第一列上方的列之后(在我的例子中是一个按钮)。我的本地文件在 Internet Explorer 中呈现完美(但我假设那是因为 IE 添加了它自己的用于清除的封闭......找不到我在哪里阅读)。但是，当我在 IE 中查看我的 jsFiddle 代码时，文本区域不会保持其 100% 的高度。我假设 jsFiddle 不会在 IE 的 Quirks 模式下呈现 HTML(这就是它与我的本地文件不同的原因)。
我看过 Holy Grail文章，w3schools文章，clear:after fix文章和其他几篇文章 ( div column layout )，但无法在两种浏览器中提出有效的解决方案。
这是我的 jsFiddle code ，这是我的代码。如您所见，我的代码有多个方法，所以很抱歉弄得一团糟。
site.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="site.css" />
</head>
<body>
<div id="top" class="clearfix">
<div class="column">
<span>blah1</span>
<textarea class="text"></textarea>
</div>
<div class="column">
<span>blah2</span>
<textarea class="text"></textarea>
</div>
<div class="column clearfix">
<span>blah3</span>
<textarea class="text"></textarea>
</div>
<div class="clearing"> </div>
</div>
<div id="center">
<span>blah blah blah</span>
<input type="button" value="Button" />
</div>
</body>
</html>
site.css
body, html {
height: 100%;
width: 100%;
}
body {
padding: 0;
border: 0;
margin: 0;
}
#top {
height: 40%;
display: block;
width: 100%;
float: left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.column {
width: 33%;
float: left;
height: 100%;
text-align: center;
}
.clearing {
height: 0;
clear: both;
}
.text {
width: 100%;
height: 100%;
}
#center {
clear: both;
}
同样值得一提的是，我尝试添加 overflow: hidden (and auto)，这确实解决了问题，但我想看到我的整个文本区域...而不是隐藏它/让它滚动。如有任何建议或想法，我们将不胜感激。
最佳答案
采取:
height: 40%;
超出你 CSS 中的#top 减速。这就是问题所在。如果你想让文本框变大，只需使用:
textarea{height:200px;}
希望这对您有所帮助。
关于CSS:清除 3 列 Div 布局后的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10115872/