Разделители ширины в пикселях и процентах рядом друг с другом

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

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

Я попытался сделать два внутренних элемента div 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 код).


css width
person dbrobins    schedule 13.03.2009    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

<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/.

person George Reith    schedule 16.03.2013

arrow_upward
3
arrow_downward

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

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

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

person Aaron Digulla    schedule 13.03.2009
comment
Это решение требует, чтобы я указал абсолютную ширину содержащего элемента (width:200px в приведенном выше примере); Я не хочу этого делать. Кроме того, я бы предпочел не использовать таблицы. - person dbrobins; 13.03.2009
comment
Вам нужно указать ширину только в том случае, если вам не нравится значение по умолчанию, равное 100%. И таблицы можно использовать даже с CSS. DIV следует использовать для контента, который находится под друг от друга, а не рядом друг с другом в одной строке. - person Aaron Digulla; 16.03.2009
comment
Вы слышали о CSS float? - person rochal; 26.03.2010
comment
@rochal: Вы слышали обо всех проблемах, которые вызывают поплавки? Например, создать N элементов одинаковой высоты, где N › 2? - person Aaron Digulla; 30.03.2010

arrow_upward
2
arrow_downward

почему вы не использовали 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, это не семантично, и это похоже на то, как поставить сплиттер на «старый» стол

person Dels    schedule 13.03.2009
comment
Во-первых, Div не является семантическим. Вы должны использовать div для разметки вещей, которые не имеют смысла, поэтому это называется div (произвольное деление). - person Rahul; 13.03.2009
comment
да, я знаю, что div не семантический, я имею в виду, что пустой элемент не был семантическим - person Dels; 13.03.2009
comment
Я не хочу указывать абсолютную ширину для чего-либо, кроме сплиттера. - person dbrobins; 13.03.2009

arrow_upward
0
arrow_downward

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

person AnnanFay    schedule 13.03.2009