1

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

<-----------------[蓝色][中心头][黑色]--------- ------------------->

我已经完成了我的研究，到目前为止我所能找到的只是两列，左列固定，右列填满了其余的空间。我想知道如何将其应用于我的问题？

会不会是这样：

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

谢谢！

4

4 回答 4

4

一个简单的解决方案 - 基本上使用您的确切样式，但将另一个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

希望这会有所帮助=)

于 2013-05-14T14:45:51.130 回答
1

这个答案本身并不是一个“答案”——它是对@Michael 帖子的扩展评论。但是，我发布了另一个答案 - 一个 jQuery 解决方案。

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

  1. 一个简单的 javascript，它扫描页面的列长度，找到最长的，并将所有较短的匹配到最大值。

  2. 另一个（可能更好）的解决方案是将背景放入已经有列的背景中（我猜它只需要 1px 高） - 只需确保中央白色条带为 980px 宽并且侧列从数千像素，甚至可以容纳最大的浏览器

于 2013-05-13T16:22:34.910 回答
1

不幸的是，没有一种超级流畅的方法可以实现广泛的交叉兼容性支持。有一个用于显示的 CSS 规范，称为 flex 或 flexbox，它可以精美而优雅地做你想做的事情，但目前它的支持非常有限。这里有一些关于 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 并将其从文档流中删除。这允许我们将左 div 向左浮动，右 div 向右浮动，宽度为 50%，以便流畅地占用浏览器的所有空间。

然后我们告诉中间的 div 占用 300px 的空间（在你的情况下是 980），我们告诉它从左边开始占据浏览器总宽度的 50%。但是，这不会使其居中，因为它是从 div 的左边缘计算的。所以我们给它一个宽度一半的负边距空间，以便将左边缘“移动”到 div 的中心。

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

于 2013-05-13T16:08:53.437 回答
1

好的，这是我的解决方案。这将向所有用户呈现一个“普通或花园”的三列固定宽度布局，然后针对启用了 javascript 的用户进行调整（让我们面对现实，这是绝大多数用户）。这个解决方案的好处是布局将像任何普通的 3 slumn 布局一样，没有使用更高级的 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/

于 2013-05-13T16:42:53.590 回答