HTML：如何創建一個可擴展的佈局，粘在邊緣

Question

我試圖做這樣的事情的元素：

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

的乙的小按鈕，不相同，但在尺寸上非常相似。

我想把它放在一個Ext.Window這是可調整大小，因此它需要能夠相應地縮放。感覺應該是這些按鈕粘在窗框的兩側 - 因此該窗口顯示爲具有在邊緣處的按鈕的正常的Ext.Window。

我曾嘗試使用<div>的與相對和絕對定位相結合，浮動「荷蘭國際集團和四離開，右，底部和頂部定位這樣做。

但是我的組合迄今還沒有成功。

Answer 1

你應該看看anchor和hbox佈局。

我覺得這一點會非常棘手，但如果你使用一個以上的面板應該有可能

一種可能是使用了橫向盒佈局，使3個板

窗口將有一個錨佈局，所以你可以根據窗口使三個子面板調整大小。該子面板將具有hbox佈局以及具有flex:1的中心單元。

您應該在layout manager處獲得戰利品，並嘗試合併佈局以滿足您的需求。

做出這樣的事情

 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + 
+ +     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 
     } 
    ] 
} 

祝你好運！