Фиксированная неуказанная ширина + гибкий макет

Это должно быть легко в 2012 году :P

Что мне нужно сделать, так это иметь 2 div рядом. В левом находится таблица. Правый содержит карту Google.

Левый div должен расширяться настолько, насколько это необходимо для размещения ширины таблицы (поэтому это столбец «фиксированной ширины», но ширина не указана мной). Это фиксированная ширина, потому что при изменении размера браузера таблица занимает то же количество пикселей. Я не хочу указывать ширину, потому что таблица может быть любого размера.

правильный div должен занимать остальную часть пространства.

Кто-нибудь знает, как это сделать? Я даже не знаю, как это найти в гугле. Каждый «фиксированный/гибкий» макет, который я встречаю в сети, имеет указанную ширину для фиксированного столбца.


layout css fluid-layout
person user275801    schedule 22.12.2012    source источник
comment
невозможно с css: P с jQuery или Javascript   -  person Muhammad Talha Akbar    schedule 22.12.2012
comment
вау, это отстой :( не могу поверить, что W3C до сих пор не понял этого?   -  person user275801    schedule 22.12.2012
comment
да, я видел аналогичный вопрос несколько дней назад, и спрос был таким же! Я спросил его, что могу помочь с Jquery, но он не захотел!   -  person Muhammad Talha Akbar    schedule 22.12.2012
comment
Я пробовал это: #fixed_div { float: left; положение: статичное; слева: 0; верх:0; высота: 100%; } #fluid_div { float: left; положение: статичное; высота: 100%; справа: 0; } а радости нет :(   -  person user275801    schedule 22.12.2012
comment
Похоже, мне придется попробовать использовать Jquery... но действительно жаль, что нельзя сделать что-то настолько простое в 2012 году!! :П   -  person user275801    schedule 22.12.2012

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте это:

Разметка HTML

<div id="container">
    <div class="gmap"></div>
    <div class="table"></div>
</div>​

с помощью CSS

#container {
    position: relative;
}
.table, .gmap {
    position: absolute;
    top: 0;
    height: 300px;
}
.table {
    left: 0;
    right: 150px; /* width of gmap */
}
.gmap {
    right: 0;
    width: 150px;
}

или с помощью jQuery

var containerWidth = jQuery('#container').innerWidth();
var tableWidth = jQuery('.table').outerWidth();

jQuery('.gmap').width(containerWidth -tableWidth);

​ JSFIDDLE_WITH_CSS JSFIDDLE_WITH_JAVASCRIPT

person algorhythm    schedule 22.12.2012
comment
Я заметил, что вы устанавливаете ширину gmap, но я хочу не указывать ширину gmap или таблицы. По сути, браузер должен знать ширину таблицы, и он должен просто выделить остальную ширину для gmap. В вашем примере gmap имеет ширину 150 пикселей, но мой монитор имеет ширину 1920 пикселей, а ширина таблицы, вероятно, составляет около 150 пикселей. Это означает, что есть много белого пространства. - person user275801; 22.12.2012
comment
сделать это с помощью javascript. рассчитать недостающую ширину следующим образом: jsfiddle.net/gMfX4 - person algorhythm; 22.12.2012
comment
Спасибо @algorhythm, попробую Jquery :) спасибо за примеры jquery. - person user275801; 22.12.2012

arrow_upward
0
arrow_downward

Что насчет CSS:

#firstTable{
    display:inline;
    width:auto;
}

#secondTable{
    display:inline;
    width:auto;
}

#myTable{
    width :"100px"
}

HTML

<div id="firstTable"><table id="myTable"><tr><td>Hello World!</td></tr></table></div>
<div id="secondTable"><div id="myMap"></div></div>
person ATOzTOA    schedule 22.12.2012
comment
@ATOzTOA, чувак, это не решение! Пожалуйста, удалите, чтобы предотвратить больше отрицательных голосов! Я забрал свой минус обратно! - person Muhammad Talha Akbar; 22.12.2012
comment
Проблема в том, что первый столбец будет отображаться нормально, а второй столбец — нет, потому что ключевое слово auto минимизирует ширину таблицы. Например, если второй столбец содержит слово «Симон», то ширина столбца будет равна ширине слова «Симон». Я хочу, чтобы второй столбец был максимальным, то есть... даже если div содержит только Саймона, div все равно должен расширяться, чтобы заполнить остальную часть окна браузера. Ключевое слово auto этого не делает :( ... В идеале должны быть auto-max и auto-min.. или, возможно, auto-greedy и auto-ungreedy, аля регулярное выражение - person user275801; 22.12.2012
comment
@AspiringAqib Спасибо, чувак ... Я могу только проголосовать за удаление ... Мне сделать ответ пустым? - person ATOzTOA; 22.12.2012
comment
Какая должна быть максимальная ширина? у меня такое чувство, что это не сработает - person user275801; 22.12.2012