css 3列div居中固定宽度左中右溢出：隐藏答案

【问题标题】：css 3 column div centered fixed width left middle and right overflow:hiddencss 3列div居中固定宽度左中右溢出：隐藏
【发布时间】：2016-12-01 16:13:58
【问题描述】：

如果屏幕太小，我想创建一个 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？我一直在寻找，但我能找到的只是流畅的布局，这不是我想要的。

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

谢谢

【问题讨论】：

感谢大家的帮助！

标签： css web

【解决方案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;
}

【讨论】：

这个对我有用，不知道可以margin-left: -800px;谢谢！

【解决方案2】：

如果您想使用外部 css 文件，首先样式属性应该是类属性。你可以试试这个简单的例子。我刚刚添加了一些背景颜色以使 div 可见：

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

【讨论】：

是的，我的意思是Class，不知道为什么我把它作为Style。谢谢

【解决方案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。

【讨论】：

【解决方案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 是为了确保块之间没有间距。

【讨论】：