HTML: как создать масштабируемый макет с элементами, приклеенными к краям - PullRequest
Новая
       9

HTML: как создать масштабируемый макет с элементами, приклеенными к краям

1 голос
/ 30 июня 2010

Я пытаюсь сделать что-то вроде этого: 

  :                                                  :
..:..................................................:..
  :B               <center>B</center>               B:
  :                                                  :
  :   Sed et velit sit amet eros pulvinar auctor.    :
  :   Integer tristique facilisis velit, vitae       :
  :   rhoncus neque auctor sit amet. Ut              :
  :   condimentum porta ipsum, eu luctus quam        :
  :B  tincidunt ut. Sed id dolor eros. Aenean       B:
  :   semper volutpat leo, vel euismod tellus        :
  :   feugiat vitae. Aenean varius, ipsum eu         :
  :   fringilla tincidunt, leo nunc feugiat          :
  :   neque, vitae imperdiet sapien orci ut ipsum.   :
  :                                                  :
  :B               <center>B</center>               B:
..:..................................................:..
  :                                                  :

B - маленькие кнопки, не идентичные, но очень похожие по размеру.

Я хочу поместить это в Ext.Window , размер которого можно изменить, и, следовательно, он должен иметь возможность соответственно масштабироваться. Ощущение UI должно заключаться в том, что кнопки приклеены к боковым сторонам оконной рамы, поэтому окно выглядит как обычное Ext.Window с кнопками по краям.

Я пытался сделать это, используя <div> в сочетании с относительно и абсолютным позиционированием, float 'и четырьмя левыми , вправо , низ и верх позиционирование.

Но мои комбинации пока не сработали.

1 Ответ

1 голос
/ 30 июня 2010

Обратите внимание на макет anchor и hbox .

Я думаю, что это будет немного сложно, но если вы используете более одной панели, это будет возможно

Можно использовать макет hbox и создать 3 панели

Окно будет иметь разметку якоря, поэтому вы можете изменить размер трех подпанелей в зависимости от окна. Подпанель будет иметь компоновку hbox и центральную ячейку с flex:1.

Вы должны взять добычу в менеджере раскладок и попытаться объединить раскладки, чтобы создать то, что вам нужно.

сделать что-то вроде этого 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 1                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 1                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 2                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

В JavaScript это даст: 

{
    anchor: '100% 5%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'button 2',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
},{
    anchor: '100% 90%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'lorem ipsu some text',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
},{
    anchor: '100% 5%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'button 2',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
}

Удачи!

...