So zeigen zwei Bilder auf der gleichen Linie (CSS)

Ich bin derzeit skinning Website für eine virtuelle airline und ich brauche Hilfe, wie man
zwei Bilder zu zeigen, bis auf der gleichen Linie statt einer brechen auf der nächsten Zeile.

Es sollte als angezeigt werden:

LOGO-SYMBOL

Aber stattdessen verwandelt es sich in:

               ICON

LOGO

Weiß jemand, wie man dieses Problem beheben in CSS?

Dank!

Hallo, könnten Sie ein jsFiddle? Etwas code wäre hilfreich.
Was ist mit float left/right?
Ich benutze float right zu machen, erscheinen auf der rechten Seite, das, was ich versuche zu tun, ist legen Sie es auf die gleiche Linie wie ein weiteres Bild auf dem linken Rand.
Hier ist das CSS und die layout.tpl: link und die [link] (klmgefs.zzl.org/lib/skins/css/default.css)
Möchten Sie das Symbol auf der gleichen Linie wie das logo (vorausgesetzt, die Seite ist klmgefs.zzl.org)?

InformationsquelleAutor Reid Chase | 2013-05-11

  1. 0

    Ersten, ich muss zugeben, deine HTML-hochgeschraubt - inline-Stil-Angaben, falsche Bild, links, etc.

    Ersetzen Sie die #top div mit der folgenden, die in Ihrem layout.tpl-Datei:

    <!-- 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>

    Ersetzen Sie den folgenden CSS-style-Deklarationen mit:

    #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;
}

    InformationsquelleAutor Qantas 94 Heavy

  2. 3

    Überprüfen dieses jsfiddle

    Können Sie ein div für jedes LOGO und SYMBOL und gleiten.

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

    und CSS:

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

    InformationsquelleAutor Sergio

  3. 0

    versuchen, die Verwendung von links anstelle von Bild-tags,

    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);}

    oder wenn Sie weiterhin verwenden wollen, den image-tag, können Sie dieses auch verwenden ..

    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;}

    wenn du gehst, um die ändern des Containers Größe, sicher, es muss passen, sowohl von den Bildern.

    InformationsquelleAutor Sam Oyl

Schreibe einen Kommentar