Question

我的问题是标题。所以我基本上有3列div。我希望中间的宽度为980px，然后我希望标题的左边延伸到浏览器窗口的末尾，背景为蓝色。至于标题的右边，我希望它以黑色背景颜色延伸到浏览器右侧的末尾。它看起来像这样：

＆lt; ------------------------------ [blue] [中心标题] [黑色] ----- -----------------------＆GT;

我已经完成了我的研究，到目前为止我所能找到的只有两列，左栏固定，右栏填充其余部分。我想知道这可以应用于我的问题吗？

会是这样的：

<div style="width:100%;">
     <div style="display:table-cell; background-color:blue;"></div>
     <div style="width: 980px;">my header</div>
     <div style="display:table-cell; background-color:black;"></div>
</div>

谢谢！

Answer 1

一个简单的解决方案 - 基本上使用您的确切搜索，但将另一个block放在中心table-cell元素中，类似于此span：

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

我将所有内联样式移动到单独的CSS块并使用了类选择器：

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

这是一个jsfiddle

在这里，为了更好的说明，我把中心缩小了很多：jsfiddle

希望这有助于=）

Answer 2

不幸的是，没有一种非常流畅的方式来实现这一点，它也具有广泛的交叉兼容性支持。有一个名为flex或flexbox的CSS规范可以做到你想要的美丽和优雅，但它目前支持非常有限。以下是flexbox上的一些资源供您阅读...

http://css-tricks.com/old-flexbox-and-new-flexbox/

与此同时，您可以通过一些基本的CSS jiggery-pokery实现您想要的布局，它可以满足您的需求，但它需要绝对定位您的中间div。

继承人JSFiddle：http://jsfiddle.net/CW5dW/

这是CSS：

.left {
    width: 50%;
    height: 300px;
    float: left;
    padding-right: 160px;
    box-sizing: border-box;
    background: red;
}

.right {
    width: 50%;
    height: 300px;
    float: right;
    padding-left: 160px;
    box-sizing: border-box;
    background: blue;
}

.middle {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    padding: 10px;
    margin-left: -150px;
    box-sizing: border-box;
    background: orange;
}

你可能会问这里发生了什么？

基本上，我们将div作为class middle并将其从文档流中删除。这允许我们将左侧div和右侧div向右浮动，宽度为50％，以便流畅地占用浏览器的所有空间。

然后我们告诉中间div占用300px的空间（在你的情况下为980），我们告诉它从左边开始浏览器总宽度的50％。这并不是它的中心，因为它是从div的左边缘计算出来的。所以我们给它一个宽度为一半的负余量空间，将左边缘的“移动”排序到div的中心。

然后，因为我们知道中间div的宽度为300px（在你的情况下是980），我们可以说左边的div应该在它的右边缘有一些填充大于或等于中间div宽度的一半，在我的例子中是150px，我增加了10px，因此文本无法直接到div的边缘，所以总共160px。我们对正确的div做同样的事情，但是它的左侧。这限制了这两个div的内容落在我们的中间div之下。

Answer 3

这个答案不是＆＃34;答案＆＃34;因此 - 它是对@Michael的帖子的延伸评论。但是，我发布了另一个答案 - 一个jQuery解决方案。

关于@Michael的回答（这确实是一个非常整洁的解决方案），如果你删除你的高度声明（OP毫无疑问会这样），那么各个列的背景都会暴露出来 - 这个方法依赖于背景在其底边平整，以使设计连贯。如果OP的设计在列后面没有背景，那么这个解决方案应该没问题。如果需要背景（他们可能通过问题措辞判断）那么它可能会很尴尬。两个解决方案......

一个简单的javascript，它扫描页面的列长度，找到最长的，并将所有较短的匹配到最大值。
另一个（也可能是更好的）解决方案是将背景放入你的已经上面的列（我想它只需要1px高） - 只需确保中央白色带宽为980px并且侧栏延伸了大约一千个像素，以适应最大的浏览器

Answer 4

好的，这是我的解决方案。这将为所有用户提供“公共或花园”三列固定宽度布局，然后为启用了javascript的用户调整它（让我们面对它，绝大多数用户）。这个解决方案的好处是，布局的行为就像任何普通的3个布局布局，没有使用更高级的CSS调整（如绝对定位和固定高度）可以体验到的怪癖。

在这里摆弄...... http://jsfiddle.net/vuary/

你应该能够看到HTML和CSS发生了什么......这是基本的东西。 jQuery也很简单：

$(document).ready(function(){

    // find the width of the browser window....
    var docuWidth = $(window).width();

    // find the width of the central column as set by the CSS...
    // (you could hard code this as 980px if desired)
    var centerWidth = $('#center').width();

    // figure out how many pixels wide each side column should be...
    sideColWidth = (docuWidth-centerWidth) / 2;

    // then set the width of the side columns...
    $('#left,#right').css({
        width:sideColWidth+'px'
    });
})

修改

将jQuery转换为文档准备好时调用的函数，如果视口调整大小，则再次转换...以防万一：

http://jsfiddle.net/aKeqf/

HTML / CSS：3列，可变边和固定居中的中间列

4 个答案: