3

画面の幅全体を占めるヘッダーがあります。私のヘッダーでは、3 つの div を配置したいと考えています。これらは隣同士に配置する必要があります。横の div は固定幅で、中央は利用可能な他のスペースを取る必要があります。そのため、ヘッダーの幅がわからず、中間コンテナーの幅もわかりません。

今、私はこのコードを持っています: html:

<div id="header">
  <div id="menu-container">
    menu goes here
  </div>
  <div id="logo-container">
    logo goes here
  </div>
  <div id="music-player-container">
    music player comes here
  </div>
</div>

そしてCSS：

#header {
  height: 200px;
  margin: 0;
  padding: 0;
  border: 0;
}

#menu-container {
  width: 400px;
  height: inherit;
  float: left;
}

#logo-container {
  height: 100%;
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  width: auto;
}

#music-player-container {
  width: 400px;
  height: inherit;
  float: left;
}

フロートの他の問題に従って動作するはずです....そうではありません

4

7 に答える 7

6

負のマージンを持つフロートdivを使用できます。

http://jsfiddle.net/cy5E7/1/

あなたの場合：

http://jsfiddle.net/AjVHy/

負のマージンは、左右のフロート固定divよりも優れています。ユーザーのウィンドウが非常に小さい場合、レイアウトが乱れることはありません。この悪い例を見てください（ブラウザウィンドウのサイズを小さい幅に変更してください）：http：//jsfiddle.net/surendraVsingh/qZLHb/1/（@SVSに感謝）。通常のフロートレイアウトでは、親コンテナが十分に広い場合にのみ、すべてのフロートdivが配置されます。

標準のフロートレイアウトのもう1つの欠点は、列レイアウトが必要であるが、中間コンテンツの高さがわからない場合です。

于 2012-07-27T13:16:13.797 に答える
1

2番目と3番目のdivの順序を切り替えてから、このCSSを使用します。 

#menu-container, #music-player-container {
    float:left;
    width: 400px;
}
#music-player-container {
    float:right;
}
#logo-container {
    margin:0 400px;
}

jsfiddleの例

于 2012-07-27T13:26:47.953 に答える
0

何をコーディングする予定かは正確にはわかりませんが、私の見解では、次のように表示されます。やはり固定幅です。」

ここで私が理解できないのは、非常に狭い幅のモニター（たとえば、1024x768の解像度など）の場合、両側に400ピクセルの列があると、ロゴスペースが224ピクセルになるということです。それは不自然に見えるでしょう。

menu-container, logo-container & music-player-containerとにかく、続行する場合は、3つのdiv [ ]すべてをヘッダーと呼ばれる別の要素（HTML5を使用している場合）または任意の名前の別のdiv（<=HTMLを使用している場合）で囲むことをお勧めします4.01）次に、幅を100％に固定します。と200pxの固定高さ;。

次に、menu-containerfloat: left;とmusic-player-containerを使用しfloat: right;ます。これにより、ロゴコンテナにスペースが与えられます。ロゴコンテナに。を持たせwidth: auto;ます。これを行うと、私が正しければ、基本的な半流体ヘッダーレイアウトが得られます。

乾杯、あなたの質問がすぐに解決されることを願っています:)

于 2012-07-27T13:20:19.410 に答える
0

あなたがやろうとしていることを理解しました。申し訳ありませんが、JavaScript/jQueryの醜い形式を使用せずにこの問題の解決策を見つけることができていません。

基本的に、問題は、CSSに2つの要素を設定できるプロパティがないことです（1つは固定幅で、もう1つはdivの残りのスペースを占有します）。これを非常に厳密にシミュレートできるfloatのオプションがいくつかありますが、それらが本当に必要なものを提供する可能性は低いと言えます。

Bootstrapと呼ばれるプロジェクトがあり、他のjQueryプラグインと同じようにインストールできます（または、実際には「CSS」プラグインのように使用できます。つまり、意味がわかります。 JavaScript）、それはあなたがあなたが望むことをすることを可能にするでしょう。

リンクは次のとおりです：http ：//twitter.github.com/bootstrap/download.html

最初にドキュメントを確認して、警告/制限を認識していることを確認することを強くお勧めします。

幸運を！

編集：私はローガルの答えが好きですが、それを使用する前に、左の境界線を追加する能力が失われ、負のマージンでdivに背景画像を適用することが非常に困難になることを覚えておく必要があります。

于 2012-07-27T13:28:26.130 に答える
0

別のオプション：

#header {
    display: table;
    height: 200px;
    margin: 0;
    padding: 0;
    border: none;
}
#header > div {
    display: table-cell;
    height: inherit;
}
#menu-container, #music-player-container {
    width: 400px;
}
#logo-container {
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
}

HTH

于 2012-07-27T13:45:29.040 に答える
0

これを行うための非常に良い方法は考えられません。理想的な解決策ではありませんが、これを表に変えることができます。

<table>
    <tr>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
    </tr>
</table>

次に、div とそれを含む td のサイズを同じに設定するだけです。

于 2013-07-02T09:04:51.737 に答える
0

もちろん、テーブルを使用することもできます.. - hides -

ヘッダー div 内に次のようなものがあります。

<table width=100%>
    <tr>
        <td width=200>
            menu
        </td>
        <td>
            logo
        </td>
        <td width=400>
            music
        </td>
    </tr>
</table>

(CSS atm には遅すぎる)

于 2012-07-27T14:04:21.093 に答える