0

中央に静的な幅 (たとえば 250px) があり、左右の列に動的な幅がある動的な 3 列のデザインが必要です。そのため、ブラウザーの幅が同じでなくても、すべてのユーザーが使用できます。2 番目の 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 が小さすぎたり大きすぎたりすることがあるということです。この問題を解決する方法はありますか?

JS フィドルのデモ

4

2 に答える 2

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 に答える