CSS 3列除以固定宽度左中间和右溢出:隐藏

Question

我想创建一个3列Div布局，左中间所有固定尺寸和左右列截止，如果屏幕太小。但是内容物将始终以固定宽度为中心。（溢出：隐藏没有滚动条）

 left-   width:300px;
 middle- width:1000px;
 right-  width:300px;
If screen fit:
|       width:100%        |
[left][   middle   ][right]
If screen does not fit:
   |    width:100%     |
[left][   middle   ][right]
If screen too large:
|          width:100%            |
   [left][   middle   ][right]
<div style="container">
  <div style="left"></div>
  <div style="middle"></div>
  <div style="right"></div>
</div>

我应该使用哪些CSS？我一直在搜索，但我能找到的只是我想要的流体布局。

任何帮助将不胜感激，或将我指向正确的职位。

谢谢

Answer 1

如果容器固定宽度，则可以绝对放置该容器。

.container {
  left: 50%;
  margin-left: -800px; /* half of the width */
  overflow: hidden;
  position: absolute;
  width: 1600px;
}
.container:after { /* clear fix */
  clear: both;
  content: '';
  display: table;
}
.container > div {
  float: left;
  height: 300px;
}
.left, .right {
  background: #369;
  width: 300px;
}
.middle {
  width: 1000px;
}

Answer 2

如果您想使用外部CSS文件，则首先要关闭样式属性。您可以尝试这个简单的示例。我刚刚添加了一些背景颜色以使div可见：

http://codepen.io/shirofuji/pen/ebyygw

Answer 3

不确定为什么要固定宽度而不是响应宽度，而是：

.container {
  overflow: hidden;
}
.wrap {
  margin: 0 auto;
  width: 1600px;
}
.wrap:after {
  content: '';
  clear: both;
  display: table;
}
.left, .middle, .right {
  float: left;
}
.left {
  width: 300px
}
.middle {
  width: 1000px;
}
.right {
  width: 300px;
}

您还需要一个容器div。

Answer 4

css

.container { font-size: 0; text-align: center; }
.left, .right, .middle { display: inline-block; height: 500px; }
.left, .right { width: 300px; background: #f3f3f3; }
.middle { width: 1000px; background: #AAA; }
@media (max-width: 1600px){
  .left, .right { display: none; }
}

html

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

font-size:0是为了确保块之间没有间距。