5202

ein Blog über technische Fragen zu Blogger

Blogger: Zwei Bilder nebeneinander mit Javascript

von

Update: Vergesst diesen Post - hier findet ihr mein aktuellstes Script!

Ich glaube die häufigste Suchanfrage für 5202 ist, wie man in Blogger zwei Bilder nebeneinander bekommt. Ein Post dazu ist also immer eine sichere Bank :D.

Heute eine ultra-einfache-Lösung für dieses Problem mit Hilfe von ein paar Zeilen Javascript - als Bonus spiele ich den Erklärbär in einem neuen Screencast.

Das Script

In dem Screencast verwende ich dieses Script:
<style>
.two {
       display: block ;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
        width: 50%;
        float: left;
        padding: 10px 20px;
}
.two img {
 width: 100%
}
.two:before,
.two:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.two:after {
    clear: both;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
$(document).ready(function() {
 $('.two, .two a').removeAttr("style");
 $('.two img').removeAttr("width height");
 $('.two').next('br').remove();
  });
</script>
Es gäbe sogar eine noch einfachere Lösung - aber die funktioniert im IE7 nicht und ich möchte niemand frustrieren ... also machen wir es mit float: left.

Ich habe das ganze in allen gängigen Browsern auf OSX getestet und da funktioniert es in allen Bloggervorlagen ohne Problem - wie es auf Windows aussieht, kann ich nicht sagen, weil ... hmhm ... ich gerade kein Windows zur Verfügung habe.

Ich hoffe ich kann daran nächste Woche wieder was ändern, bis dahin: Meldet euch, wenn es ein Problem gibt oder was nicht klappt!