三列设计，左右动态宽度，中间静态宽度 [英] Three Column Design, dynamic width left + right side and static witdh in the middle

问题描述

我想要一个动态的三列设计，其中中心有一个静态宽度(例如 250 像素)和左 + 右列的动态宽度.因此，即使浏览器宽度不同，每个用户也可以使用它.同样重要的是，第二个 div 确实位于窗口的中心.

HTML

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

CSS

#header {高度:200px；文本对齐:居中；}#navigation_left {向左飘浮;背景:RGBA(128, 255, 128, 1);宽度:80px；/* 应该是动态的 */高度:继承；}#navigation_right {浮动:对；背景:RGBA(255, 128, 128, 1);宽度:80px；/* 应该是动态的 */高度:继承；}#navigation_center {位置:相对；显示:内联块；宽度:250px；高度:继承；背景:RGBA(128, 128, 255, 1);}

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

JS 小提琴演示

解决方案

试试这个:

首先，将您的 #navigation_center 移到 #navigation_right 下方，以免与最新的内容重叠.

<div id="navigation_left">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.
<div id="navigation_right">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.

<div id="navigation_center">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Voluptates consectetur veritatis fugit aspernatur quo repelenduscorruptioni perferendisinventre dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.

然后，这个 CSS:

#header {高度:200px；背景:#f80；位置:相对；/* 我们将绝对定位子列 *//* 文本对齐:居中；/* 删除这个 */}#navigation_left {位置:绝对；左:0；顶部:0；背景:#0f0；高度:100%；/* 魔法来了:*/宽度:50%；padding-right: 125px;/* 从内容区域减去 250/2 */-webkit-box-sizing: 边框框；/* 所以填充被减去而不是被添加 */-moz-box-sizing: 边框框；box-sizing: 边框框；}#navigation_right {位置:绝对；右:0；/* 从左到右改变 */顶部:0；背景:#00f；高度:100%；宽度:50%；padding-left: 125px;/* 从左到右改变 */-webkit-box-sizing: 边框框；/* 所以填充被减去而不是被添加 */-moz-box-sizing: 边框框；box-sizing: 边框框；}#navigation_center {位置:相对；/* 居中元素 */显示:块；边距:0 自动；宽度:250px；背景:RGBA(128, 128, 255, 1);高度:100%；}

现场示例http://codepen.io/anon/pen/hzrdG

I want to have a dynamic three column design, where the center has a static width(for instance 250px) and the left + right columns dynamic width's. So every user can use it even they don't have the same browser width. It's also important that the 2nd div is really in the center of the window.

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);
}

The problem so far is sometimes the left + right div's are too small or too big, because I said them hardcoded to 80px. Is there a way to fix this problem?

JS Fiddle Demo

解决方案

Try this:

First, move your #navigation_center below #navigation_right so it doesn't get overlapped by the latest.

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

Then, this 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%;
}

Live example http://codepen.io/anon/pen/hzrdG

这篇关于三列设计，左右动态宽度，中间静态宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！