2

これをどのように実装するかは本当に苦労しています。

ページの中央に960pxのナビゲーションバーを作りたいです。このナビゲーション バー内には、3 つの異なるセクションまたは列があります。左端は最低でも 200px です。中央のものは常に中央に配置され、常に 20px です。右端は最小 300px で、右揃えです。フル 960px では、次のようになります。 ここに画像の説明を入力

740px では、次のようになります。 ここに画像の説明を入力

620px では、次のようになります。 ここに画像の説明を入力

520px では、次のようになります。 ここに画像の説明を入力

その下には別のデザインが入るので、心配する必要はありません。これを行う最善の方法は何ですか？

編集：これは私が現時点で持っているものです。960px で動作しますが、パディングのため、サイズを変更すると中央の div が中央に留まりません。小さすぎるとバラバラになり、2行になります。

.left {
    float: left;
    width: 300px;
}
.right {
    float: right;
    width: 400px;
}
.middle {
    width: 100%;
    padding: 0 100px;
    height: 39px;
}
4

3 に答える 3

2

ここで必要なメディア クエリは 1 つだけです。以下の例では、ウィンドウが縮小すると、黄色の div が 620px まで中央に配置され、ピンクの div がスクロールすると 520px までスライドします。これを探していたのか、@jhunlioのソリューションを探していたのかわかりません。

html

<div class="wrapper">
    <div class="left-col"></div>
    <div class="inner-wrapper">
        <div class="middle-col"></div>
        <div class="right-col"></div>
        <br class="clean" />
    </div>
</div>

CSS

body{
  margin: 0px;
}
.clean{
  clear: both;
}
.wrapper{
  height: 100px;
  position: relative;
  min-width: 520px;
}
.inner-wrapper{
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(50% + 10px);
  height: 100%;
}
.left-col{
  background: green;
  width: 200px;
  height: 100%;
}
.middle-col{
  width: 20px;
  height: 100%;
  float: left;
  background-color: yellow;
}
.right-col{
  float: right;
  width: 300px;
  background: pink;
  height: 100%;
}

@media screen and (max-width: 620px){
  .inner-wrapper{
    width: auto; 
  }
}

フィドルhttp://jsfiddle.net/BkFup/2/

于 2013-03-08T01:37:41.490 に答える
1

これは、ピクセル パーフェクトなメディア クエリを実行する必要があるため、注意が必要です。

http://codepen.io/cimmanon/pen/cmJhx

<nav>
  <div class="a">a</div>
  <div class="b">b</div><!--
  --><div class="c">c</div>
</nav>

コメントアウトされた空白に注意してください^^

body {
  margin: 0;
  padding: 0;
}

@media (min-width: 520px) and (max-width: 620px) {
  nav {
    text-align: right;
  }

  nav div {
    text-align: left;
    display: inline-block;
  }

  .a {
    float: left;
  }
}

@media (min-width: 620px) {
  nav {
    position: relative;
    overflow: hidden;
  }

  .a {
    float: left;
    min-width: 200px;
  }

  .b {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
  }

  .c {
    float: right;
    min-width: 300px;
  }
}

/* colors! */

.a {
  background: green;
  min-width: 200px;
}

.b {
  background: yellow;
  width: 20px;
}

.c {
  background: pink;
  min-width: 300px;
}

もちろん、問題は、最初/最後の要素がその子を含めるのに十分な大きさでない場合です。中間要素は、620px のブレークポイントでページの中央に絶対に配置されるため、エラーの余地はありません。

于 2013-03-08T02:07:13.603 に答える
1

html

<div class="navWrap">
    <div class="nav">
        <div class="navLeft"></div>
        <div class="navCenterWrap">
            <div class="navCenter"></div>
        </div>
        <div class="navRight"></div>
    </div>
</div>

CSS

.navWrap {margin:auto; width:960px;}
.nav {
    float:left;
    width:100%;
}
.navLeft {
    width:20%;
    float:left;
    padding:10px 0;
    background-color:green;
}
.navCenterWrap {
    margin:auto;
    width:5%;
}
.navCenter {
    float:left;
    width:100%;
    padding:10px 0;
    background-color:yellow;
}
.navRight {
    width:30%;
    float:right;
    padding:10px 0;
    background-color:blue;
}

@media screen and (max-width: 740px){ 
    .navWrap {
        width:100%;
    }
}

@media screen and (max-width: 520px){ 
    .navWrap {
        width:100%;
    }
    .navLeft {
      width:40%; 
        margin:0;
    }
    .navCenterWrap {
        width:5%;
        float:left;
    }
    .navRight {
        width:55%;
        margin:0;
    }
}

注：フィドルをスクロールして、効果の
動作デモを確認してください

于 2013-03-08T01:22:29.927 に答える