2

3 つの div をインラインで整列させようとしています

私は持っている

#header {
    width:100%;
    height:160px;
}

コンテナがページの幅に収まるようにメインコンテナとして (100%)

それから

.header-left {
    width:33%;
    display:inline-block;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    display:inline-block;
}
.header-right {
    width:33%;
    display:inline-block;
}

コンテナー内の 3 つの div 用。

ページの中央と他の 2 つの div の間に .logo div が必要なので、ロゴ div の両側にある 2 つの他の div が必要です。

ロゴの div は 409px にする必要があります。これはロゴの幅です。

何らかの理由ですべてが左側に表示され、その理由がわかりません

4

5 に答える 5

2

ヘッダー HTML を次のように配置すると、1 つの解決策が可能になります。

<header class="ex1">
    <div class="header-left">the left stuff </div>
    <div class="header-right">the right stuff</div>
    <div class="logo"><img src="http://placehold.it/409x138" ></div>
</header>

次の CSS を適用します。

header {
    border: 1px solid blue;
    width: 100%;
    min-width: 800px;
    height: 160px;
    overflow: auto;
}
.ex1 .header-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: left;
}
.ex1 .logo {
    width: 409px; /* width of the logo */
    margin:10px auto 0 auto;
    border: 1px solid red;
}
.ex1 .logo img {
    display: block;
}
.ex1 .header-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: right;
}

基本的に、左のヘッダー要素を左に、右の要素を右にフロートさせ、ロゴ要素を通常のボックス フローの中央に配置します。

を設定しmin-widthて、ロゴ/バナー イメージを固定できるようにします。

フィドル参照: http://jsfiddle.net/audetwebdesign/Esst8/

于 2013-03-27T18:03:26.023 に答える
1

再構築して使用するFloat

必要なものを得るには、HTML を再構築min-widthし、body. このようなもの（このフィドルに見られるように）：

HTML

<div id="header">
        <div class="header-left">LEFT</div>
      <div class="header-right">RIGHT</div>
        <div class="logo"><img src="images/logo" width="409" height="138" /></div>
</div>

エッセンシャル CSS

body {
    min-width: 600px; /* some minimum greater than 409px */
}

.header-left {
    float: left;
    width: 50%;
    margin-right: -204.5px;
    border-right: 204.5px solid transprent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    position: relative;
    z-index: 1;
}
.header-right {
    float: right;
    width: 50%;
    margin-left: -204.5px;
    border-left: 204.5px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更新:「中心で」機能し続けるには、設定の 2 つのサイド ピースのうち大きい方を考慮する必要がありますmin-width。したがって、固定幅の要素を両側に配置する場合は、min-width次の式で 2 つの側面要素のうち大きい方に基づいて計算する必要があります。

((大きい側の部分 px) x 2) + 409px ロゴ = 最小幅

そのサイジングで必要に応じて境界線などを考慮することを忘れないでください.

于 2013-03-27T17:53:08.063 に答える
1

このコンテキストで、409px が全幅の 34% を超えるとどうなるでしょうか? それは壊れます。

html を書き直すことを考えてみてください。この方法では機能しません。

于 2013-03-27T17:35:36.680 に答える
0

divdisplay: inlineの代わりに使用display: inline-block

デモ: http://jsfiddle.net/R65fA/1/

@Milche Patanの回答を読んだところ、子要素にパーセンテージと固定幅の両方を使用していることに気付きました。それは本当に悪い考えです。標準にするために書き直したほうがいいです。

于 2013-03-27T17:28:57.667 に答える
0 
#header{ width:100%}
.header-left {
    width:33%;
    float:left;
}
.logo {
    width:34%; /* width of the logo */
    margin:10px 0px 0px;
    float:left; height:138px;
}
.header-right {
    width:33%;
    float:left;
}
.clr{ clear:both;}

HTML:

<div id="header">
     <div class="header-left">LEFT</div>
     <div class="header-right">RIGHT</div>
     <div class="logo"><img src="images/logo" width="409" height="138" /></div>
     <div class="clr"></div>
</div>
于 2013-03-27T19:26:56.017 に答える