2016-04-09 6 views
0

私は商用のウェブサイトを作成中ですが、私は立ち往生しています。div内でdivをスタイリングする(Chromeの動作)

上記のリンクをクリックすると、ロゴとテキストを分割するために使用するグラデーショングラフィックが表示されます。これをGoogle Chromeの最新バージョンで開くと、ロゴの右側に正しく表示されていないことがわかります。

私のHTML構造:

<div class="header"> 
    <a href="/?lang=en"> 
     <div class="logo"> 
      <div class="logo-container"> 
       <img src="/assets/imagesets/logos.gif" alt="Winslow Logo" height="100" width="138" /> 
       <div class="side-border"></div> 
      </div> 
      <div class="text-container"> 
       <h1 class="tag">Winslow Hotels</h1> 
      </div> 
     </div> 
    </a> 
    <!-- ... --> 
</div> 

CSS:

div.header 
{ 
    max-width: 800px; 
    height: 100px; 
    margin: 1% auto; 
    margin-bottom: 10%; 
    border-radius: 15px 15px 15px 0px; 
    background-color: #FFFFFF; 
} 

div.logo 
{ 
    display: block; 
    width: 800px; 
    height: 100px; 
} 

div.logo-container 
{ 
    width: 140px; 
    height: 100px; 
    float: left; 
    display: inline-block; 
} 

div.side-border 
{ 
    width: 2px; 
    height: 100px; 
    float: right; 
    display: inline-block; 
    background-image: url("/assets/imagesets/side-border.png"); 
} 

div.text-container 
{ 
    display: inline-block; 
    width: 660px; 
    float: right; 
    height: 100px; 
    font-family: Arial; 
    font-size: 5em; 
    padding: 1.5%; 
} 

div.menu-container 
{ 
    display: block; 
    width: 250px; 
    position: fixed; 
    top: 8%; 
    left: 0px; 
} 

このコードは Google Chromeのを除いて、他のすべてのブラウザで動作します。 Chromeのバグですか?また、修正するためにCSSにハックを追加する必要がありますか?

編集:

div.side-borderは次div.text-containerに配置されていないとdiv.logo-container以内に表示されません。

+2

あなたが必要とする正確に何をハイライトするために***質問に***あなたの特定の問題を明確化または追加の詳細情報を追加してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。何が間違っているかを推測するために別のページを表示する必要はありません。 –

+0

Ok質問を編集しました –

答えて

1

幅と浮動小数点に問題があるようです。そこ私は対処しません不要なコードの多くは、ですが、私はあなたにお勧めするものである、あなたの結果を達成する代わりに、別のdiv.side-border)のpseudo-selector:after)を使用します。

.logo-container { 
    position:relative; 
} 

.logo-container:after { 
    width: 2px; 
    height: 100px; 
    display: block; 
    background-image: url("/assets/imagesets/side-border.png"); 
    content: ''; 
    position: absolute; 
    right: 0; top: 0; 
} 

そして.side-borderを削除しますHTMLとCSSから。


編集:考え直しに、これは、より簡単にすることができます。ただ、.logo-containerbackgroundとしてグラデーションボーダー画像を追加して、右にそれを置く:

div.logo-container { 
    width: 140px; 
    height: 100px; 
    float: left; 
    display: inline-block; 
    background: url("/assets/imagesets/side-border.png") no-repeat right; 
} 
+2

これはより洗練されたアプローチです。既存のコードを使用するより簡単な解決法は '.logo-container img {float:left; } ' –

+0

問題を修正しました。 –

+1

'float:left;'は最も単純です。 – Aziz

関連する問題