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

Question

我的问题是与标题。所以我基本上有3列的div。我希望中间的宽度为980像素，然后我想让页眉的左侧扩展到浏览器窗口的末尾，并且背景颜色为蓝色。至于标题的权利，我希望延长到黑色背景颜色的浏览器右侧的末端。它种关是这样的：

< ------------------------------ [蓝] [中路头球攻门] [黑] ---------------------------->

我已经完成了我的研究，到目前为止我所能找到的都是两个带有固定左列的列，右列填充剩余空间。我想知道这可以如何应用于我的问题？

难道是这样的：

<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

一个简单的解决方案 - basicaly使用您的确切stying，但把另一block中央table-cell ELEM耳鼻喉科，像这样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暗中捣鬼，将让你你想要的布局，但它需要绝对定位你的中间格。

继承人的的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与类中间，并从文档的流程中删除它。这使我们能够左移左边的div，右边的div右移，宽度为50％，以便流畅地占用浏览器的所有空间。

我们再告诉中间DIV占用的空间300像素（在你的情况下980），和我们告诉它去你的浏览器从左边的总宽度的50％。虽然这并不居中，因为它是从div的左边缘计算出来的。因此，我们给它一个宽度为其一半宽度的负边距空间，以便将左边缘移动到div的中心。

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

Answer 3

这个答案不是“答案”本身 - 这是给迈克尔@的帖子延长评论。但是，我发布了另一个答案 - 一个jQuery解决方案。

关于@ Michael的回答（这确实是一个非常整洁的解决方案）有一​​个小问题，如果你删除了你的高度声明（OP肯定会），那么各个列的背景会暴露出来 - 在背景的所有底部边缘平整，以使设计一致。如果OP的设计没有列背后的背景，那么这个解决方案应该没问题。如果需要背景（这可能由问题措辞来判断），那么它可能会很尴尬。两种解决方案...

1. 一个简单的JavaScript，扫描页面的列长度，发现最长，并匹配所有最短的一个最大。

2. 其他（也许更好）的解决方案是把背景放到你已经有的列上（它只需要高1px，我猜） - 只要确保中央白色带宽为980px，侧列延伸了大约1000像素，以适应最大的浏览器

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/