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

Question

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

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

Я попытался сделать два внутренних элемента display: inline-block (с vertical-align: top ), установив для левого элемента значение width: 3px , но нет способа установить право на ширину 100% - 3px. Я также пытался использовать трюк 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

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

<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 2

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

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

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

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.