html - 2つの画像を同じ行に表示する方法 (CSS)

Question

私は現在、仮想航空会社のサイトのスキニングを行っていますが、1 つの画像が次の行に割り込むのではなく、2 つの画像を同じ行に表示する方法について助けが必要です。

次のように表示されます。

ロゴアイコン

しかし、代わりに次のようになります。

               ICON

ロゴ

CSSでこれを修正する方法を知っている人はいますか?

ありがとう！

Answer 1

このjsfiddleを確認してください

LOGOやICONごとにdivを作って浮かせることができます。

<div class="head">
   <div class="logo">LOGO</div>
   <div class="logo">ICON</div>
</div>

およびCSS:

.head { width:100%;}
.logo {float:left; padding:10px;}

Answer 2

画像タグを使用する代わりにリンクを使用してみてください ,,

HTML:

<div class="container">
    <a class="one"><a class="two"></a></a>
</div>

CSS:

.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}

または、まだイメージタグを使用したい場合は、これを使用することもできます..

HTML:

<div class="container">
    <img class="one" alt scr="bla">
    <img class="two" alt scr="bla">
</div>

CSS:

.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}

コンテナーのサイズを変更する場合は、両方の画像に収まる必要があります。

Answer 3

まず、あなたの HTML がめちゃくちゃであることを認めなければなりません - インライン スタイル宣言、間違った画像リンクなど。

#toplayout.tpl ファイルのdiv を次のように置き換えます。

<!-- Logo + Search + Navigation -->
<div id="top">
    <a id="logo" href="<?php echo SITE_URL?>" target="_blank">
        <img src="/lib/skins/klm/img/logo.png" alt="Home">
    </a>
    <img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>

次の CSS スタイル宣言をこれに置き換えます。

#fb {
    float: left;
    position: absolute;
    display: inline;
    width: 50px;
    bottom: 0;
    right: 0;
}

#logo {
    bottom: 0;
    display: inline;
    left: 0;
    position: absolute;
}

#top {
    height: 58px;
    margin: 0;
    padding: 10px 0;
    position: relative;
}