Question

如果我是正确的显示：内联应该在同一行显示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>

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

Answer 1

非块元素不能指定高度/宽度（并且内部没有内容，它没有任何内容可以给它大小） - 而是你想要inline-block，如下所示：

display: inline-block;

You can see a full list of options for display here

Answer 2

不幸的是，display: inline-block is 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>

显示div元素：内联隐藏

2 个答案: