элементы div с отображением: встроенные скрыты - PullRequest
Новая
       2

элементы div с отображением: встроенные скрыты

2 голосов
/ 26 июня 2010

Если я прав: дисплей 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>

Я вижу div с class = page1, но page2 и page3 невидимы.

Ответы [ 2 ]

4 голосов
/ 26 июня 2010

Элемент без блока не может иметь высоту / ширину, указанную таким образом (и без содержимого внутри, он не будет иметь ничего, чтобы придать ему размер) - вместо этого вы хотите inline-block, например: 

display: inline-block;

Полный список параметров для display вы можете увидеть здесь

2 голосов
/ 26 июня 2010

К сожалению, display: inline-block не поддерживается более старыми версиями IE .Вы можете сделать это, поместив три внутренних тега div влево и отменив float на содержащем элементе.Вот полный пример (см. Мои комментарии для соответствующих изменений): 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...