带有 display: inline 的 div 元素被隐藏答案

【问题标题】：div elements with display: inline are hidden带有 display: inline 的 div 元素被隐藏
【发布时间】：2010-06-26 12:23:59
【问题描述】：

如果我是对的 display:inline 应该在同一行显示 div 而没有任何换行符。这是我的网页，其中 display:inline 只是让我的 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>

我可以看到 class= page1 的 div，但 page2 和 page3 是不可见的。

【问题讨论】：

也许您只是忘记在此处包含它，但请使用正确的Doctype 来触发标准模式。

标签： css

【解决方案1】：

非块元素不能像这样指定高度/宽度（并且内部没有内容，它不会有任何大小） - 相反你想要inline-block，像这样：

display: inline-block;

You can see a full list of options for display here

【讨论】：

是的，但不幸的是 inline-block 不适用于所有浏览器，但在大多数浏览器上都有效。据我所知，它实际上不适用于 IE6 和 FF2。您可以使用display: -moz-inline-block 使其在FF2 上运行。在 IE6 中 display: inline-block 仅适用于自然内联的元素。见quirksmode.org/css/display.html
@snootles - 你想要一个高级效果......你需要一个高级浏览器:) 如果你想要 IE6，使用 span，然后使用 inline-block 并添加 mozilla 标签......这有点 hacky，如果你想要比浏览器晚的效果，这是你最好的选择。附带说明：您确定 OP 需要支持这些浏览器吗？如果有选择，我不会……除非需要，否则我不会。
…或W3 specification。
对不起尼克，我想打断你的讨论，但是OP是什么意思？
@Nitesh - “原始海报” - 你 :)

【解决方案2】：

不幸的是，display: inline-blockis not supported by older versions of IE。您可以通过向左浮动三个内部 div 标记并撤消包含元素上的浮动来做到这一点。这是完整的示例（有关更改，请参阅我的 cmets）：

<!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>

【讨论】：

说它不支持是不准确的，它不像IE中的大多数东西一样完全支持。