Я уверен, что это должно быть довольно очевидным, но я как бы застрял здесь. Я хочу создать инструмент, и мне нужен набор инструментов и рабочее пространство. Поэтому я хочу разместить панель инструментов как фиксированную ширину влево (скажем, 250 пикселей), а рабочее пространство использовать остальную часть доступного пространства на экране.
Я пробовал как с DIV, так и с TABLE, но рабочее пространство продолжает перемещаться под панелью инструментов, потому что оно становится больше (так что обе части не фиксируются рядом друг с другом)
Как я могу получить рабочее пространство?
Здесь HTML:
<div id="container" style="width: 100%">
<div id="toolbox" style="width: 250px">
</div>
<div id="workspace"> <!-- this keeps jumping to the next line -->
</div>
</div>
Вам нужно поплавать на панели инструментов:
#toolbox {
float: left;
width: 250px;
}
/* also you should contain the floated element */
#container:after {
content: ' ';
display: block;
clear: both;
}
Кроме того, не давайте ширину или поплавок в #workspace
и она будет скользить между вашей #workspace
инструментов и оставшейся шириной контейнера.
На самом деле мне нужно было что-то вроде этой скрипки. Переполнение делало трюк, я думаю
overflow: auto;
Благодарю!
Гнездо вашего divs 1 уровень глубже, и вы можете использовать макет таблицы.
<style>
#container { display:table; width:100% }
#container > div { display:table-row }
#container > div > div { display:table-cell }
</style>
<div id="container">
<div>
<div id="toolbox" style="width: 250px">
</div>
<div id="workspace">
</div>
</div>
</div>