Пиксель и процентная ширина делятся бок о бок

Question

Я нашел много похожих вопросов и опробовал несколько решений (включая некоторые из так называемых макетов CSS «Святой Грааль»), но они не совсем выполняют то, что мне нужно.

У меня есть содержащий div (блок, содержащий CSS) с идентификатором right. Внутри слева, я хочу, чтобы div фиксированной ширины (разделитель, но не имеет значения, для чего он используется; id splitpane); справа, заполняя остальное пространство, еще один div (id right-box ниже).

Я попытался сделать два внутренних делителя display: inline-block (с vertical-align: top), установив левый на width: 3px, но тогда нет способа установить правое с шириной 100% - 3 пикселя. Я также попытался использовать трюк float: left / margin-left: -100% / margin-left: 3px, но у него та же проблема: 100% плюс 3 пикселя переполняют родительский содержащий блок и вызывают всплывающую полосу прокрутки. (Конечно, проблема не в полосе прокрутки как таковой; я мог бы использовать overflow: hidden, чтобы удалить ее, но тогда содержимое справа будет обрезано.)

В настоящее время я использую width: 99.5% для правильного div, но это ужасный хак (и может быть переполнен в зависимости от ширины экрана). Это выглядит примерно так:

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

С CSS следующим образом (версия с плавающей запятой, но версия с инлайн-блоком аналогична):

#right {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 85%;  /* this is part of a larger div */
}
#right-box {
  width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
  height: 100%;
}
#splitpane {
  float: left;
  width: 3px;
  height: 100%;
  background: white;
  border-left: solid gray 1px;
  border-right: solid gray 1px;
  cursor: e-resize;
}

Возможно ли это сделать? Это для внутреннего приложения. Поэтому решения должны работать только в Firefox 3 (хотя, если они специфичны для FF3, предпочтительно потому, что решение соответствует стандартам, а другие браузеры - нет, а не потому, что оно использует только Firefox). код).

Answer 1

DIV - это неправильный тип элемента для этого, так как они не "общаются" друг с другом. Вы можете легко добиться этого с помощью таблицы:

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

100% сделают правый ящик максимально широким, но в пределах таблицы.

Answer 2

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

<style type="text/css">
    div {
        height: 100px;
    }
    #container {
        width: 100%;
    }
    #left {
        background: #FF0;
    }
    #splitpane {
        position: relative;
        float: right;
        background: #000;
        width: 3px;
    }
</style>

<div id="container">
    <div id="splitpane"></div>
    <div id="left"></div>
</div>

См. http://jsfiddle.net/georeith/W4YMD/1/

Answer 3

почему вы не использовали margin-left (так как это была разметка с плавающей точкой) на правом поле?

так что не нужно создавать разделитель div ...

#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

да что-то в этом роде, я ненавижу пустой div, это не семантическое, и это все равно, что ставить сплиттер на "старый" способ таблицы

Answer 4

Если правая ячейка div # будет содержать только не всплывающее содержимое, возможно, было бы лучше просто поместить содержимое внутри #right и позволить ему оборачиваться вокруг всплывающей # splitpane.