CSS布局，中间列固定宽度和位置，两个外列流式宽度，无间距。

Question

CSS布局，中间列固定宽度和位置，两个外列流式宽度，无间距。

htmlcssflexbox

4

我有一个容器元素，必须包含3个div（或表格单元格或flexbox等）。该容器具有固定的大小。假设宽度为500px，高度为100px。

中间的div必须具有固定的宽度，比如100px。还必须能够通过设置css来移动。在这个例子中，我们假设它固定在距左侧225像素处。

其余两个div应填满每一侧的剩余空间（或当没有空间时不占用空间，即使中间div超过容器边界）。侧面的div与中间div之间不应有任何间隔，也不应有任何重叠。

所有内部div都是100%高度（即100px）。

container 500x100
----------------------------------------------------------------------------|
| |-------------------------------| |---------------------| |-------------| |  
| |  left, fluid                  | | middle, positioned  | | right,fluid | |
| |                               | |at 225px, 100px width| |             | | 
| |-------------------------------| |---------------------| |-------------| | 
----------------------------------------------------------------------------|

- danielle wallace

我认为JS是必要的，不幸的是 :( - Daniel Cheung

稍微提供一些背景，中间元素将能够使用JavaScript移动，因此最好的解决方案不会有数十个属性（在此处为225px）需要反复更改。 - danielle wallace

这个我不是很明白...你能详细解释一下吗？ - Ruddy

据我所知，布局无法通过CSS实现。如果对您有用的话，您可以固定两侧并使中心部分自适应。 - Ruddy

如果您告诉我需要澄清哪些部分，我会很乐意...中心是固定宽度，并在容器内设置为特定的X坐标。两侧是流体的，并占用剩余空间。 - danielle wallace

显示剩余13条评论

3个回答

0

如果我们使用这样的标记语言：

<div class="container">
    <div class="box1">a</div>
    <div class="wpr">
        <div class="box2">b</div>
        <div class="box3">c</div>
    </div>
</div>

我们可以使用设置overflow:hidden或overflow:auto的块级格式上下文来实现这一点。

在fiddle中悬停在容器上以看到效果

FIDDLE

CSS

.container{
    width:500px;
    height:100px;
}
.wpr {
    overflow:hidden;
    height: 100px;
    background:aqua;
}
.box1, .box2, .box3 {
    height: 100px;
}
.box1 {
    background:pink;
    float:left;
    min-width: 50px;
    -webkit-transition: min-width 1s;
    -moz-transition: min-width 1s;
    -o-transition: min-width 1s;
    transition: min-width 1s;
}
.box2 {
    background:purple;
    width:100px; /*fixed width */
    display:inline-block;
    float:left;
}
.box3 {
    background:orange;
    display:inline-block;
    overflow:hidden;
    width: calc(100% - 100px);  /*100px is same as box with fixed width */
}
.container:hover .box1 {
    min-width: 450px;
}

- Danield

不幸的是，这个解决方案依赖于设置某些元素的宽度。这不允许在任何解决方案中将中间元素定位到容器框的左边界之后（因为属性不允许负宽度）。当我说“即使中间div被移动到容器的边界之外”时，这就暗示了这一点，但我可能应该更明确地表达。 - danielle wallace

@daniellewallace - 请看一下我的更新答案：它不依赖于在元素上设置宽度。（除了根据问题要求的中间框） - Danield

你正在通过设置box1的宽度来移动box2。这并不能使box2超过容器的左侧移动。 - danielle wallace

-1

这可以通过表格简单实现。像这样创建表格

<table class="container">
    <tr>
        <td class="box1">
        </td>
        <td class="box2">
        </td>
        <td class="box3">
        </td>
    </tr>
</table>

按照以下方式应用CSS：

.container{
    background:#dadada;
    width:500px;
    height:100px;
    border:none;
    border-collapse:collapse;
}
.box1{
    background:red;
    width:100px; /* This will set the position of Middle Box as well as occupy the space in left */
}
.box2{
    background:blue;
    width:350px; /* This will set the width of Middle Box */
}
.box3{
    background:green;
    /*This will automatically occupy the space in the right */
}

您可以在此处找到演示：http://jsfiddle.net/s78A6/

- theHarsh

你还在将两列的宽度设置为固定值啊，伙计！！ :) - NoobEditor

他确实这样做了，但是如果你在 .box1 上删除 width:100px;，它应该可以工作。更新了他的 JSFiddle。我现在注意到中间的盒子将始终完全居中，这不是 OP 的问题。 - Tom Spee

我不知道这是什么，哈哈。这是错误的，所以我会给它点个踩。 - Ruddy

@NoobEditor：Ruddy说中间框有两个值。从左边的位置和宽度。中间框的左侧位置值可以作为第一个框的宽度给出。这将向右推动box2并占用空间。 - theHarsh

@Rubby：你看过我在CSS中写的评论了吗？你想设置中间框的LEFT-POSITION和FIXED-WIDTH。我已经设置了中间框的FIXED-WIDTH。现在你想给它LEFT-POSITION。我已经将这个值作为第一个框的WIDTH。这将把中间框推到LEFT-POSITION的值。现在尝试更改中间框的WIDTH或LEFT-POSITION（作为第一个框的宽度）的值。第一个和最后一个块将保持流体布局，而中间框将是固定宽度。我认为你只需要这个，因为你的图表显示了这一点！ - theHarsh

不幸的是，这个解决方案依赖于设置某些元素的宽度。这不允许任何解决方案将中间元素定位在容器框的左边界之外（因为属性不允许负宽度）。当我说“即使将中间div移动到容器边界之外”时就暗示了这一点，但我可能应该更明确一些。 - danielle wallace

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NoobEditor · Accepted Answer

你听说过 CSS表格 和 calc 吗？

注意：该解决方案符合CSS3标准，因此IE8及以下版本不支持！:)

演示

HTML

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

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div { /* just for demo */
    height:300px;
    border:1px solid red
}
.container {
    display:table;
    width:100%;
    height:100%;
    table-layout:fixed;
}
.left, .right, .cent {
    display:table-cell /*aabara-kaa-dabara*/
}
.cent {
    width:225px; /* fixed center */
}
.left, .right {
    width : calc(50% - 225px) /* make left and right divs fluid */
}

编辑

如果您希望中心在调整大小时给出移动的感觉，您需要调整相邻div的宽度，类似于：

.left {
    width : calc(30% - 225px);
}

.right{
    width : calc(70% - 225px);
}

Working Demo