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

祝你好运！