0

我无法弄清楚如何清除我的 3 个 div 列下方的内容——其中每个 div 列都包含一个带有一些居中文本的跨度和一个跨度下方的文本区域。问题，或者至少我认为，是 div 标签被浮动，我没有正确清除它们。

发生的情况是 Firefox 在第一列上的列（在我的例子中是一个按钮）之后浮动我的下一个元素。我的本地文件在 Internet Explorer 中完美呈现（但我假设这是因为 IE 添加了自己的附件以进行清除……找不到我在哪里读到的）。但是，当我在 IE 中查看我的 jsFiddle 代码时，文本区域并没有保持 100% 的高度。我假设 jsFiddle 不会在 IE 的 Quirks 模式下呈现 HTML（这就是它与我的本地文件不同的原因）。

我查看了Holy Grail文章、w3schools文章、clear:after fix文章和其他几篇文章（div 列布局），但在这两种浏览器中都找不到可行的解决方案。

这是我的jsFiddle 代码，这是我的代码。如您所见，我的代码有多种方法，因此很抱歉造成混乱。

网站.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">&nbsp;</div>
        </div>
        <div id="center">
            <span>blah blah blah</span>
            <input type="button" value="Button" />
        </div>
    </body>
</html>

网站.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;
}

还需要注意的是，我已经尝试添加 in overflow: hidden (and auto)，这确实解决了问题，但我想查看我的整个文本区域...而不是隐藏它/让它滚动。任何建议或想法将不胜感激。

4

1 回答 1

2

拿：

height: 40%;

超出 CSS 中的#top 减速。这就是问题的根源。如果要使文本框更大，只需使用：

textarea{height:200px;}

希望这可以帮助。

于 2012-04-12T00:50:21.753 回答