расположены три блока в ячейке таблицы

0

Как разместить три блока в таблице-ячейке: p1 top, p2 bottom, p3 в середине? html следующим образом:

  <div id="table">
    <div id="row">
        <div id="r2"></div> 
        <div id="r3"></div>
        <div id="r1">
            <div id="p1">top</div>
            <div id="p3">middle</div>
            <div id="p2">bottom</div> 
        </div>
    </div>

  </div>

CSS

    #table{
        display: table;
        width:500px;
        height:500px;
        max-height:500px;
        min-height: 500px;
    }
    #row{
        display:table-row;
    }

#r1, #r2, #r3{
 display:table-cell;
 }

Подробности - http://jsfiddle.net/2ZF6J/

  • 3
    Что не работает с вашим текущим подходом?
  • 0
    Твоя скрипка работает на меня. Кстати, почему вы эмулируете таблицу?
Показать ещё 8 комментариев
Теги:

1 ответ

0
Лучший ответ

IE7 не поддерживает display: table поэтому вы можете просто использовать float и абсолютное позиционирование.

HTML:

<div id="wrapper">
  <div id="r2"></div>
  <div id="r3"></div>
  <div id="r1">
    <div id="p1">top</div>
    <div id="p3">middle</div>
    <div id="p2">bottom</div>
  </div>
</div>

CSS:

#wrapper {
  width:500px;
  height: 1px;
  min-height: 300px;
}

#r1 {
  position: relative;
  width: 177px;
  border:1px solid black;
}

#r3 {
  width: 156px;
  background-color: #aef;
}

#r2 {
  width: 161px;
  border:1px solid black;
  background-color: #eee;
}

#r1, #r2, #r3 {
  float: left;
  height: 100%;
}

#p1, #p2, #p3 {
  position: absolute;
  width: 100%;
}

#p1 { 
  top: 0;
  background-color: gold; 
}

#p2 { 
  bottom: 0;
  background-color: crimson; 
}

#p3 { 
  top: 50%;
  margin-top: -0.5em;
  background-color: orange; 
}

См. Здесь: http://jsbin.com/ekImIYih/3

  • 0
    Спасибо, Маяжури!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню