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

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

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

Answer 2

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

.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 3

如果容器具有固定宽度，则可以绝对定位容器。

.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 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是为了确保块之间没有间距。

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

4 个答案:

CSS

HTML