Question

我想要一个动态三列设计，其中心有一个静态宽度（例如250px）和左+右列动态宽度。所以每个用户都可以使用它，即使他们没有相同的浏览器宽度。第二个div真的位于窗口的中心也很重要。

HTML

<div id="header">
    <div id="navigation_left">left</div>
    <div id="navigation_center">center</div>
    <div id="navigation_right">right</div>
</div>

CSS

#header {
    height: 200px;
    text-align: center;
}
#navigation_left {
    float: left;
    background: rgba(128, 255, 128, 1);
    width: 80px; /* should be dynamic */
    height: inherit;
}
#navigation_right {
    float: right;
    background: rgba(255, 128, 128, 1);
    width: 80px; /* should be dynamic */
    height: inherit;
}
#navigation_center {
    position: relative;
    display: inline-block;
    width: 250px;
    height: inherit;
    background: rgba(128, 128, 255, 1);
}

到目前为止的问题有时左+右div太小或太大，因为我说它们硬编码为80px。有没有办法解决这个问题？

JS Fiddle Demo

Answer 1

这可以使用CSS3完成。设置左边和右边的宽度;右列。比方说每个50px。然后用计算设置中间列的宽度。

-webkit-calc(width: 100% - 100px) /* -50px per column equals 100px */
-moz-calc(width: 100% - 100px) /* -50px per column equals 100px */
-o-calc(width: 100% - 100px) /* -50px per column equals 100px */
-ms-calc(width: 100% - 100px) /* -50px per column equals 100px */
calc(width: 100% - 100px) /* -50px per column equals 100px */

但是，这在旧版浏览器中不起作用，但您可以通过将每列的宽度百分比设置为后备来实现。

Answer 2

试试这个：

首先，将#navigation_center移到#navigation_right下面，这样它就不会与最新的重叠。

<div id="header">
    <div id="navigation_left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_right">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.
    </div>
</div>

然后，这个CSS：

#header {
    height: 200px;
    background: #f80;
    position: relative; /* we will absolute-position children columns */

    /* text-align: center;  /* Remove this*/
}
#navigation_left {
    position: absolute;
    left: 0;
    top: 0;
    background: #0f0;
    height: 100%;

    /* Here comes the magic: */
    width: 50%;
    padding-right: 125px; /* substract 250/2 from the content area */

    -webkit-box-sizing: border-box; /* So that padding is substracted instead of added */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#navigation_right {
   position: absolute;
   right: 0; /* change left to right */
   top: 0;
   background: #00f;
   height: 100%;

   width: 50%;
   padding-left: 125px; /* change left to right */

   -webkit-box-sizing: border-box; /* So that padding is substracted instead of added */
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#navigation_center {
    position: relative;

    /* center the element */
    display: block;
    margin: 0 auto;

    width: 250px;
    background: rgba(128, 128, 255, 1);

    height: 100%;
}

实例 http://codepen.io/anon/pen/hzrdG

三柱设计，左侧+右侧动态宽度，中间静态宽度

2 个答案: