[QuickTip] Two Images next to each other ✤✤

So, nach einer gefühlten Ewigkeit mal wieder ein kleiner Quicktip. Ich wurde gefragt, wie ich zwei Bilder nebeneinander platziere. Das möchte ich euch jetzt kurz zeigen.
Ich hab total viele Tutorials zu dem Thema gelesen, diese beiden Versionen kommen aber am häufigsten zu Gebrauch.

After what seems like forever a new quicktip. I've been asked how to place two images next to each other. That's what I want to explain to you today.
I searched like a hundred tutorials about that, but the two solutions I show you here work best for me.

Die Div-Lösung

Bei dieser Lösung werden die Bilder in Div-Containern platziert und so nebeneinander gestellt.
In this solution we place the images inside div-containers, which we'll place next to each other.


Der Grundaufbau ist folgender:

<div class="one"><a href="ZIELURL"><img src="BILDLINK" /></a></div>
<div class="two"><a href="ZIELURL"><img src="BILDLINK" /></a></div>

The basic markup is the following:

<div class="one"><a href="TARGETURL"><img src="IMAGELINK" /></a></div>
<div class="two"><a href="TARGETURL"><img src="IMAGELINK" /></a></div>

Die CSS sieht so aus:

And that's what the CSS looks like:

.one, .two{
max-width: 49%;
display: inline-block;
}

.one{
margin-right: 0.5%;
}

Die Tumblr-Lösung

Diese Lösung hab ich von Oliver, damit hab ich zum Beispiel meine Rezeptübersicht gemacht. Es funktioniert aber auch perfekt für zwei Bilder nebeneinander.

I got this solution from Oliver and used it for example in my recipe index, but it also works very well with only two images.

• 
• 

Das markup sieht so aus:

Markup looks like this:

<div id="container">
    <ul id="content">             
        <li><a href="URL"><img src="LINK" /></a></li>
        <li><a href="URL"><img src="LINK" /></a></li>
      </ul> 
</div>

Und CSS:

And the CSS:

#content img {
  width: 100%;
}
#content {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  width: 100%;
  font-size: 0 !important;
  line-height: 0 !important;
}
#container {
 width: 100%;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 padding: 0;
 margin: 0 auto;
}