0

我想要一个动态的三列设计，其中中心有一个静态宽度（例如 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 小提琴演示

4

2 回答 2

2

这可以通过 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 */

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

于 2013-09-12T23:03:19.023 回答
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

于 2013-09-12T23:39:27.823 回答