0

レスポンシブ デザインにする必要がある最終版のプロジェクトがあります。この件についてはあまり説明しておらず、JavaScript についてもまだ教えられていません。コンセプトはなんとなくわかりますが、ページのデザインで課題に直面しています。

ロゴはメイン ナビゲーションの後に配置する必要がありますが、検索バーの横にも配置する必要があります。ただし、検索バーは、ロゴの種類や幅や高さに関係なく、常にロゴの高さの中央に配置する必要があります。2 つの幅は、およそ 63% のロゴと 31% の検索バー + 送信ボタンです。モバイル デバイスの場合、検索バーはロゴの下に配置する必要があるため、表は使用できません。

質問がダンプされている場合は申し訳ありませんが、少なくとも以前に質問されていないことを確認しました B)

お時間をいただきありがとうございます！

ページレイアウト

4

1 に答える 1

1

これを行うにはいくつかの方法がありますが、最初にVertialalignを使用できます。これは私がいつも見つけたCSSのPITAです。

垂直方向の整列：

メインコンテナをに設定して、検索divでdisplay: table-cell;使用できます。vertial-align: middle;これは古いバージョンのIEではサポートされていませんが、応答性を高めるために、とにかくジャンプするためのいくつかのフープがあります。

.menuBar {
    display: table;
}

.logo, .search {
    display: table-cell;
    vertial-align: middle;
}

<div class="menuBar">
    <div class="logo">LOGO</div>
    <div class="search">SEARCH</div>
</div>

行の高さ：

  #ex6     { height: 5em; line-height: 5em; }
  #ex6 *   { vertical-align: middle; }

  <div id='ex6'>
    <div class='lfloat'>lfloat</div>
    <div class='rfloat'>rfloat</div>
    <input type='checkbox'>
    <input type='text'>
    <span class='small'>small</span>
    <img src='avatar.gif'>
    normal
    <span class='large'>large</span>
  </div>

線の高さの例などはここにあります-http://codeincomplete.com/posts/2011/3/20/css_vertical_align/

于 2012-07-17T09:55:50.040 に答える