1

我有以下 html & 类结构。它在 Firefox 中按预期显示，但在 IE 8rt-col中被推送到下一行。关于什么可能是错误的任何想法？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
...
<div id="main" class="container_12">
  <div id="lt-col" class="grid_8">
  ...
  </div>
  <div id="rt-col" class="grid_4">
  ...
  </div>
</div>

与容器和网格相关的 CSS 如下：

#main:after, #lt-col:after, #rt-col:after { 
   content: "."; 
   height: 0; 
   visibility: hidden; 
   display: block; 
   clear: both; 
} 

#main { 
   width: 960px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 10px;
}
4

2 回答 2

0

假设您正在尝试构建左右列网格：

您需要为每列定义一个明确的宽度。目前，你没有。而且由于您使用的是“clear：both;” 两列上的属性和值，它们将简单地显示为行。

将此添加到您的 CSS（或某些宽度变化）中，您的行将变为列：

    #lt-col {
            float: left;
            width: 50%;
    }
    #rt-col {
            float: right;
            width: 50%;
    }
于 2011-03-24T22:57:25.617 回答
0

@clairesuzy 我认为问题在于应用的样式。有一些样式正在向主 div 或 rt-col 和 lt-col div 添加填充

这可以很容易地通过使用下面的代码开始排序

<div class="container_12">
  <div class="grid_8">
  ...
  </div>
  <div class="grid_4">
  ...
  </div>

  <div class="clear"></div>
</div>

无论任何样式如何，上述内容都可以开箱即用...

然后执行此操作并确保没有填充

<div id="main">

    <div class="container_12">

        <div class="grid_8">
            <div id="lt-col">...</div>
        </div>
        <div class="grid_4">
            <div id="rt-col">...</div>
        </div>

    <div class="clear"></div>   
    </div>
</div>

你想做的简化版

于 2011-04-14T19:11:48.540 回答