CSS Проблемы с отображением: таблица

-1

Я решил, что понятия не имею, что я делаю с моим css.CSS Проблемы с отображением: таблица

Я хочу, чтобы два дисплея отображались бок о бок. Левый div имеет контент и должен быть достаточно большим, чтобы его поддерживать. Правый div должен занимать остальную часть горизонтального пространства и быть той же высоты, что и левый div.

Третий div должен быть ниже двух и охватывать всю страницу.

Я попытался использовать таблицу, но ячейка правой руки не будет расширяться до полной высоты/ширины. Я пытаюсь использовать divs с дисплеями, установленными в таблицу, table-row, table-cell.

По какой-то причине левый div продолжает расширяться горизонтально, а мой правый div не получает никакого пространства. Я попытался указать ширину левого div, и он игнорируется.

В правом div есть динамический контент, созданный javascript, поэтому при рендеринге он пуст.

#main { 
    display : table; 
    width : 100%; 
} 

.row { 
    display : table-row; 
    width : 100%; 
} 

#row2 { 
    display : table-row; 
    background-color:purple; 
} 

#right { 
    display : table-cell; 
    overflow: hidden; 
    height: 100%; 
    background-color:blue; 
} 

#left { 
    display : table-cell; 
    background-color:red; 
    width: 100px; 
} 

<body> 
    <div id="main"> 
     <div class="row"> 
      <div id="left"> 
       Some content 
      </div> 
      <div id="right"></div> 
     </div> 
     <div id="row2"> 
      Some stuff 
     </div> 
    </div> 
</body>

Js Fiddle

источник

2013-10-01 mjr

В столбце «право» не принимает никакого места, потому что это не имеет никакого содержания. Дайте ему что-нибудь, и это будет.

http://jsfiddle.net/6LFsL/4/

<div id="main"> 
    <div class="row"> 
     <div id="left"> 
      Some content 
     </div> 
     <div id="right">&nbsp;</div> 
    </div> 
    <div id="row2"> 
     Some stuff 
    </div> 
</div>

Кроме того, используя свойство отображения таблицы не означает, что вы должны иметь элементы таблицы, таблицы строк, и табличные ячейки. Стол и таблица-ячейки достаточно для этого сценария:

.row { 
    display : table; 
    width : 100%; 
} 

#row2 { 
    background-color:purple; 
} 

#right { 
    display : table-cell; 
    overflow: hidden; 
    height: 100%; 
    background-color:blue; 
} 

#left { 
    display : table-cell; 
    background-color:red; 
    width: 100px; 
}

источник

2013-10-01 19:14:29 cimmanon

Таким образом, очевидно, что мои проблемы возникают из библиотеки javascript, которая рисует контент для моего правого div. По-видимому, слишком глупо, чтобы определить высоту div, если я явно не установил ее. Спасибо, что решили проблемы с шириной. – mjr

CSS Проблемы с отображением: таблица

ответ

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