Question

有三个div的块将包含文本，其中块1和2是可选的。在这种情况下，我想使用float：left来对齐div，以避免div之间的额外空间。这是我正在使用的代码。这段代码在IE8中运行良好，但在IE7中运行不正常。我已经完成了帖子Float left in a div does not work in IE7 but does in Firefox and IE8。但它没有用。

代码：

  <div style="width:1120px;overflow:auto">
   <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" 
      style="overflow:hidden; vertical-align:text-top; float:left;height:100%;width:33%;display:table-row"> 
                Block 1 </div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty"

    style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row;"> 
                Block 2</div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row"> 
                Block 3 </div >

Answer 1

我不知道ESPN的ASP，但我可以告诉你1.标记是一团糟2.你过分思考CSS。

首先，第一个<div>没有关闭，但这可能是由于你粘贴到SO。其次，三个内部div具有相同的ID - 这是禁止的。第三，你的风格都是内联的，这也不是理想的，但是为了简洁起见，我假设你将它们粘贴在这里。

您的标记可以大大简化：

  <div id="container">
    <div class="block _invisibleIfEmpty" id="block_1" name="_invisibleIfEmpty" > 
       Block 1 </div>
    <div class="block _invisibleIfEmpty" id="block_2" name="_invisibleIfEmpty"> 
       Block 2</div>
    <div class="block _invisibleIfEmpty" id="block_3" name="_invisibleIfEmpty" > 
       Block 3</div>
  </div>

然后这个CSS可以让你到达你需要的地方：

#container {
    width: 1120px; 
    height: 100px;       
}

.block {
    width: 33%;
    float: left; 
    height: 100%;
}

您可以调整高度来品尝。如果需要，可以添加溢出值 - 但不需要'overflow：auto'，因为这是CSS中的默认值。如果先前的样式声明了不同的“溢出”值，并且您想要撤消该值，则只需要这样做。

PS：我对此进行了测试，它适用于IE7：http://jsfiddle.net/xZ2Az/1/

Float left在IE7中不起作用，但在IE8 sharepoint .aspx页面中有效

1 个答案: