Как установить контейнеры смешанной ширины (px и%)?

Question

Как установить контейнеры смешанной ширины (px и%)?

0

Я уверен, что это должно быть довольно очевидным, но я как бы застрял здесь. Я хочу создать инструмент, и мне нужен набор инструментов и рабочее пространство. Поэтому я хочу разместить панель инструментов как фиксированную ширину влево (скажем, 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>

alexander.uv 28 нояб. 2013, в 00:50

Источник

1

Покажите свой HTML и CSS код
SpliFF 27 нояб. 2013, в 23:50

Теги:

html

css

layout

3 ответа

Ещё вопросы

Brian Graham · Answer 1 · 2013-11-27T21-37-00.000Z

Вам нужно поплавать на панели инструментов:

#toolbox {
    float: left;
    width: 250px;
}

/* also you should contain the floated element */
#container:after {
    content: ' ';
    display: block;
    clear: both;
}

Кроме того, не давайте ширину или поплавок в #workspace и она будет скользить между вашей #workspace инструментов и оставшейся шириной контейнера.

Я попробовал это, но теперь я получаю рабочее пространство, используя 100% ширины и сидя за панелью инструментов (панель инструментов действительно плавает влево)
Является ли ваш сайт в Интернете или локальным, если он доступен для публичного просмотра, не могли бы вы опубликовать ссылку.

alexander.uv · Answer 2 · 2013-11-28T13-33-00.000Z

На самом деле мне нужно было что-то вроде этой скрипки. Переполнение делало трюк, я думаю

overflow: auto;

http://jsfiddle.net/cmT4x/

Благодарю!

SpliFF · Answer 3 · 2013-11-27T22-19-00.000Z

Гнездо вашего 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>