使用表格单元格的响应式 3 列对我不起作用

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网格？

#wrapper {
    width: 100%;
    height: 100%;
    overflow:hidden; 
    display: flex;
    flex-direction: row;
}
#sidebar {
    flex-basis: 250px;
}
#content {
    overflow: hidden;
    flex: 1;
}
#sidecontent {
    flex-basis: 250px;
}

Answer 2

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

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

演示：

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);
  }
}

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