我被一些我想象中的事情困住了:)
将两个面板并排 float 并使它们居中。 我得到的最接近的是将面板居中但彼此重叠。
像这样:
_
|_|
_
|_|
我想得到
_ _
|_| |_|
这是我目前的文件
Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
//this is just a simply panel with html:'abcde"
'App.view.Portal1'
],
items:[{
xtype:'portal1',
height:400,
width:400,
style:{
margin: '0 auto',
}
},{
xtype:'portal1',
height:400,
width:400,
style:{
margin: '0 auto',
}
}]
});
有什么想法吗?欢迎大家:) ...提前致谢
更新: 我最接近“解决方案”的是以下内容:(但是它需要设置宽度)
Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
//this is just a simply panel with html:'abcde" with width & height 400
'App.view.Portal1'
],
layout:'fit',
items:[{
layout:{
type:'vbox',
align:'center'
},
items:[{
layout:{
type:'hbox',
},
//Set width :(
width:800,
items:[{
xtype:'portal1',
},{
xtype:'portal1',
}]
}]
}]
});
解决方案
感谢那些发表评论的人。这是一个可行的解决方案。不要在包装器面板上使用 layout:fit
Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
//this is just a simply panel with html:'abcde" with width & height 400
'App.view.Portal1'
],
style:{
textAlign:'center'
},
items:[{
xtype:'portal1',
style:{
display:'inline-block'
}
},{
xtype:'portal1',
style:{
display:'inline-block'
}
}]
});
最佳答案
只有 CSS 的解决方案,因为我不知道 extjs:
为每个面板提供适当的水平边距,这样它们就不会排列在一起。将它们的宽度和高度设置为正常。然后在面板上也设置 display: inline
。最后,将包含元素设置为使用 text-align: center
。为此,您可能需要引入新的容器元素。
关于css - EXTJS - float 2 个面板并将它们居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9313734/