Элементы div с дисплеем: inline скрыты

Если я прав, дисплей: inline должен отображать div на одной строке без разрыва строки. Это мой веб-страницы, где дисплей: рядный просто делает мой ДИВ невидимым:Элементы div с дисплеем: inline скрыты

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

Я могу видеть дивы с классом = page1, но стр.2 и page3 невидимы.

источник

2010-06-26 TCM

Может быть, вы просто забыли включить его здесь, но использовать правильный [Doctype] (http://hsivonen.iki.fi/doctype/ #handling) для запуска стандартного режима. –

Не-блочный элемент не может иметь высоту/ширину, указанную как это (и без содержания внутри, он не будет иметь ничего, чтобы дать ему размер) - вместо этого вы хотите 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

@snootles - вам нужен расширенный эффект ... вам нужен расширенный браузер :) Если вы хотите IE6, используйте диапазон, а затем используйте 'inline-block 'и добавьте тег mozilla, а также ... это немного взломано, если вы хотите, чтобы эффекты, опубликованные в браузерах, были вашим лучшим вариантом. В качестве примечания: вы уверены, что OP должен поддерживать эти браузеры? Учитывая выбор, я бы не ... и не делал этого, если не был нужен. –

... или в спецификации [W3] (http://www.w3.org/TR/CSS2/visuren.html#propdef-display). –

К сожалению, display: inline-blockis not supported by older versions of 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>

источник

2010-06-26 12:37:08 wsanville

Спасибо wsanville – TCM

Говорить, что это * не * поддерживается неточно, оно не полностью поддерживается *, как и большинство вещей в IE. –

Элементы div с дисплеем: inline скрыты

ответ

Смежные вопросы