Question

我有这个CSS代码

#wrapper {
    width: 100%;
    height: 100%;
    overflow:hidden; 
    display:table;
}

#sidebar {
    width:250px; 
    vertical-align:top; 
    display:table-cell;
}

#content {
    overflow: hidden; 
    display:table-cell; 
}

#sidecontent {
    width:250px; 
    vertical-align:top; 
    display:table-cell; 
}

，HTML代码如下所示

<div id="wrapper>
     <div id="sidebar">
          sidebar
     </div> <!-- sidebar -->
     <div id="content">
          content
     </div> <!-- content -->
     <div id="sidecontent">
          sidecontent
     </div> <!-- sidecontent -->
</div> <!-- wrapper -->

在桌面分辨率中有3列

[sidebar-fixed][content-fluid][sidecontent-fixed]

我认为我尝试了一切，使它在笔记本电脑/移动分辨率中看起来像这样

[sidebar-fixed][content-fluid]
[----- sidecontent-fluid ----]

我不知道下一步该做什么，请帮助。

Answer 1

为什么不使用flex grid？

      # List of move.line 
      move_lines = [
                    (0, 0, {
                        'name': libelle, # a label so accountant can understand where this line come from
                        'debit': self_debit, # amount of debit
                        'credit': self_credit, # amount of credit
                        'account_id': account_id, # account 
                        'date': date,
                        'partner_id': partner_id, # partner if there is one
                        'currency_id': currency_id or (account.currency_id.id or False),
                    }),
                    (0, 0, {
                        'name': libelle,
                        'debit': debit, 
                        'credit': credit,
                        'account_id': writeoff_acc_id,
                        'analytic_account_id': context.get('analytic_id', False),
                        'date': date,
                        'partner_id': partner_id,
                        'currency_id': currency_id or (account.currency_id.id or False),
                    })
                ]

        # Create account move
        self.pool.get('account.move').create(cr, uid, {
                        'period_id': period_id, #Fiscal period
                        'journal_id': journal_id, # journal ex: sale journal, cash journal, bank journal....
                        'date':date,
                        'state': 'draft',
                        'line_id': move_lines, # this is one2many field to account.move.line
                    })

Answer 2

除了flex，这可能是解决方案，你也可以做这样的事情。我使用display:inline-block和calc()函数来设置内容div宽度（应该是可扩展的）。

对于较低的屏幕分辨率，您可以稍微更改一些属性，例如，以获得所需的效果。

演示：

＆＃13;

body {
  margin:0;
}

#wrapper {
    width: 100%;
    height: 100%;
  
  
}

#sidebar {
    width:250px; 
    
 margin-right: -4px;
    display:inline-block;
    background:red;
}

#content {
   margin-right: -4px;
   display:inline-block; 
    background:green;
  width: calc(100% - 500px);
    
}

#sidecontent {
    width:250px; 
   margin-right: -4px;
    display:inline-block; 
    background:blue;
}

@media (max-width: 480px) {
  #sidecontent {
    width:100%;
  }
  #content {
     width: calc(100% - 250px);
  }
}

＆＃13;

<div id="wrapper">
     <div id="sidebar">
          sidebar
     </div> <!-- sidebar -->
     <div id="content">
          content
     </div> <!-- content -->
     <div id="sidecontent">
          sidecontent
     </div> <!-- sidecontent -->
</div> <!-- wrapper --

＆＃13;

使用table-cell的响应3列对我来说不起作用

2 个答案: