css布局有3个固定列。左右隐藏在低分辨率屏幕上

Question

我想创建具有3个固定列的css布局，就像你可以在图像上看到的那样，但是最重要的是左（1）和右（3）列必须隐藏在低分辨率显示器上（或当窗口不是全尺寸时） ）。

在stackowerflow上我发现了类似的东西，但左右列不是固定大小。此示例还有关于低分辨率窗口上的“崩溃”中心设计的文本（中心列向下！）。

jsfiddle.net/XMg2h/418/

Answer 1

您可以使用media queries：

@media (max-width: 600px) {  
  .example div:first-child,   /* <- and add some classes to your divs */
  .example div:last-child{
    display: none;
  }
}

Answer 2

当然还有其他方法可以解决这个问题，但这是我的快速解决方案，基本上涉及一些相对和绝对定位。这是我以前获得的样式（希望？）你正在寻找的行为（HTML保持不变）：

.example{
    width:300px;
    margin:0 auto;
    position:relative;
}
.example div{
    position:absolute;
    width:50px;
    top:0;
    height:300px;
}
.example div:first-child{
    left:-50px;
}
.example div:last-child{
    right:-50px;
}
.example div.center{
    width:300px;
    right:0;
}

div的负右/左必须对应每个侧列宽度的大小。这是基于您提供的JSFiddle example {。}}。你会注意到，如果你调整窗口大小，它会使中心div保持居中（直到窗口变得比中央div小的点，之后它与左边对齐）。

我希望这就是你要找的东西！如果不是，请告诉我，我会很乐意帮助您。祝你好运！