html - 具有 3 个固定列的 CSS 布局。在低分辨率屏幕上左右隐藏

Question

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

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

jsfiddle.net/XMg2h/418/

Answer 1

您可以使用媒体查询：

@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 示例。您会注意到，如果您调整窗口大小，它将保持中央 div 居中（直到窗口变得小于中央 div 的点，之后它向左对齐）。

我希望这就是你要找的！如果不是，请告诉我，我很乐意为您提供进一步的帮助。祝你好运！