Question

这是一个棘手的问题，但我会尽力问：

我有一个中间列的内容，我想在其左侧和右侧添加列，但我希望它们“拥抱”中间列。如何将中间列始终居中并让其他两列“拥抱”它？

列的固定宽度为750px，基本上当视口最大化时，它应该在大显示器上显示：

 -------------------------------------
|       |       |     |       |       |
|       |       |     |       |       |
|       |  left | mid | right |       |
|       |       |     |       |       |
|       |       |     |       |       |
 -------------------------------------

当窗口不够宽时，左右列应该被切断，但是中间列仍然应该居中并且可见（假设它们不会使它在水平方向上太小）：

   -------------
  |   |     |   |
  |   |     |   |
le|ft | mid | ri|ght
  |   |     |   |
  |   |     |   |
   -------------

其中“le”和“ght”在屏幕外，在视口中不可见。

我对完成此任务的任何方式感兴趣。目前我正在使用

margin-left: auto;
margin-right: auto;

以中间列为中心，但如果有办法在没有它的情况下完成此操作，那么无论如何=）

感谢您阅读这个棘手的问题。我希望我的想法得到了解决。（如果你能想到一个更好的问题标题，请随时编辑它。我不知道该放什么）

P.S。每列实际上由几个div本身组成（构成一列的块），我不确定这是否会使问题更容易解决，或者如果这完全改变了问题......

Answer 1

您也可以尝试使用浮动来查看是否能够提供您想要的内容

.divLeftCol
{
  float: left;
}

.divRightCol
{
  float: right;
}

<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>

Answer 2

这样的东西？ http://jsfiddle.net/ndtLX/

我正在使用2个浮动div之上的绝对定位div，每个占据容器的50％。

问题在于，在左右列上，屏幕外发生在另一侧，而不是在你问的同一侧......

右对齐并左对齐到中心列

2 个答案: