div元素與顯示：行內隱藏

如果我是正確的顯示：內聯應該在同一行上顯示div沒有任何換行符。這是我的網頁，其中顯示：內聯只是讓我的div不可見：div元素與顯示：行內隱藏

<html> 
<head> 
    <style type="text/css"> 
    .body{ 
    max-width:3072px; 
    min-width:3072px; 
    margin:0px auto; 
    background:#293231; 

    } 

    .page1{ 
    background:url('Main.jpg') no-repeat; 
    width:1024px; 
    height:211px; 


    } 

    .page2{ 
    background:url('Page2.jpg') no-repeat; 
    width:1024px; 
    height:211px; 
    display:inline; 
    } 

    .page3{ 
    background:url('Page3.jpg') no-repeat; 
    width:1024px; 
    height:211px; 
    display:inline; 
    } 

    .wrapper{ 
    display:block; 
    width:100%; 
    height:auto; 
    } 

    </style> 
</head> 
<body class="body"> 

    <div class="wrapper"> 
    <div class="page1"> 

    </div> 
    <div class="page2"> 

    </div> 
    <div class="page3"> 

    </div> 
    </div> 

</body> 
</html>

我能看到的div類=第1頁，但第二頁第三頁和看不見。

來源

2010-06-26 TCM

也許你只是忘了，包括在這裏，但使用適當的[文檔類型]（http://hsivonen.iki.fi/doctype/ #handling）來觸發標準模式。 – 2010-06-26 12:31:11

非塊元素不能有這樣的指定高度/寬度（並沒有裏面的內容，這將有沒有給它的大小） - 而不是你想inline-block，像這樣：

display: inline-block;

You can see a full list of options for display here

來源

2010-06-26 12:25:29

正確，但內聯塊不幸的是不適用於所有瀏覽器，但最多。據我所知，它不能真正在IE6和FF2上工作。你可以使用'display：-moz-inline-block'來使它在FF2上工作。在IE6中，「display：inline-block」只適用於自然內聯的元素。見http://www.quirksmode.org/css/display.html – user375700 2010-06-26 12:29:36

@snootles - 你想要一個高級的效果......你需要一個高級瀏覽器:)如果你想要IE6，使用一個跨度，然後使用'inline-block '並添加mozilla標籤以及...這是有點冒險的，如果你想要在瀏覽器後期的效果，這是你最好的選擇。作爲一個方面說明：你是否確定OP需要支持這些瀏覽器？給出一個選擇，我不會...，除非需要。 – 2010-06-26 12:33:16

...或[W3規範]（http://www.w3.org/TR/CSS2/visuren.html#propdef-display）。 – 2010-06-26 12:33:53

不幸的是，display: inline-blockis not supported by older versions of IE。您可以通過將三個內部div標籤左側浮動並撤消包含元素上的浮動來實現。下面是完整的例子（見我的意見對有關變更）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      .body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; } 

      .page1{ background:url('Main.jpg') no-repeat; } 

      .page2 { background:url('Page2.jpg') no-repeat; } 

      .page3{ background:url('Page3.jpg') no-repeat; } 

      /* These next two lines are my changes. */ 
      /* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; } 
      /* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; } 

     </style> 
    </head> 
    <body class="body"> 

     <div class="wrapper"> 
      <div class="page1"> 

      </div> 
      <div class="page2"> 

      </div> 
      <div class="page3"> 

      </div> 
     </div> 

    </body> 
</html>

來源

2010-06-26 12:37:08 wsanville

謝謝wsanville – TCM 2010-06-26 12:42:39

說* *不支持是不準確的，它不是*完全支持，就像IE中的大多數事情。 – 2010-06-26 12:43:22

div元素與顯示：行內隱藏

回答

相關問題