Question

所以，我有一个三列div的困境。

我想要实现的是Center Div应该响应并对齐中心，最大宽度为1000px。这可以很容易地实现使用这些css代码：

#center{max-width:1000px; width:100%; margin:0px auto; }

enter image description here

然后左右div应覆盖剩余空间。它就像左边和右边的宽度=总宽度减去中心div的宽度。

http://jsfiddle.net/bendaggers/zb38d/4/

HTML：

<div class="wrapper">
    <div class="left"></div>
    <div class="center"><a href="/">Image Logo JPG here</a>
    </div>
    <div class="right"></div>
</div>

CSS：

body {
    width:100%;
}
.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 a{
    display:inline-block;
    width:100%; max-width:1000px;
}

问题是它不起作用。这是小提琴。

有人可以帮忙吗？

Answer 1

如果您希望中心响应，并且您希望有3个相等宽度的列，则应将宽度设置为33.3％。一个技巧是你可以将中心列的宽度设置为34％，将左右宽度设置为33％宽度。

如果您想避免考虑应用于这3列的边框和填充，您还可以应用box-sizing：border-box;

 /* apply a natural box layout model to all elements */
    *, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
     }

这样，边框和填充不会扩展列的宽度，而是会在每个列宽内应用。

然后，您可以将链接置于中间列的中心。

body {
    width:100%;
}
.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:33%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:33%;
    background-color:black;
}
.center {
    display:table-cell;
    width:34%; max-width:1000px;
    text-align:center;
}

DEMO ：http://jsfiddle.net/zb38d/7/

否则如果您希望中心固定宽度，则只需设置宽度（以像素为单位）或em：

.center{ width: 1000px; }然后您需要设置左右列的不同百分比，不同于33％。否则，您将只支持非常高的分辨率，因为您为中心列设置了1000px的固定宽度。

Answer 2

最好的办法是重新思考你是如何设计的。百分比的第一个答案是最好的。白色空间是良好设计的关键;填写页面是没有必要的。

无论如何，这使用jQuery来计算左右，加上它使用display-table，它不允许max-width，只是宽度。仅使用浮点数对于子像素来说很难，因此显示表工作得更好。只有在1450px及更大的时候使用这种类型的布局才有意义，然后依靠不同的css来获得其他尺寸。由于jQuery，它会计算宽度并将样式粘贴到已解析的html中，因此，对于低于1450 min-width的css，需要！important。

DEMO：http://jsbin.com/miqetu/1

仅在桌面上的Firefox上测试过。我知道这是否适用于触摸设备或其他浏览器而没有问题。

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.col {
    box-sizing: border-box;
    float: none!important;
    clear: both!important;
}

.inner {
    padding: 20px
}

.column-1 {
    background: #ccc
}

.column-2 {
    background: #ddd
}

.column-3 {
    background: #eee
}

@media (max-width:1449px) { 
    /* used to over-ride jQuery*/

    .wrapper {
        display: block!important
    }

    .col {
        display: block!important
    }

    .column-1,
    .column-2,
    .column-3 {
        clear: both;
        float: none!important;
        width: 100%!important;
    }
}

@media (min-width:1450px) { 
    .inner {
        padding: 30px
    }

    .wrapper {
        display: table;
        height: 100%;
    }

    .col {
        display: table-cell;
        height: 100%;
    }

    .column-2 {
        width: 800px /*max-width won't work */
    }
}


@media (min-width:1500px) { 

    .column-2 {
        width: 1000px /*max-width won't work */
    }
}

HTML

<div class="wrapper">
  <div class="col column-1"><div class="inner">...</div></div>
  <div class="col column-2"><div class="inner">....</div></div>
  <div class="col column-3"><div class="inner">...</div></div>
  </div>

JQuery的：

 $(window).on("load resize", function() {
    if ($('body').width() >= 1450) {

    var ww = $(window).width();
    var rem = ww - $('.column-2').width();
    $('.column-1, .column-3').css('width', rem / 2);
    }
});

3列Div - 左右流体宽度和中间具有固定宽度

2 个答案: