JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<h2>Beispiel #1 (IE8+)</h2>
<div id="example1">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

<h2>Beispiel #2 (IE7+)</h2>
<div id="example2">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

<h2>Beispiel #3 (IE7+)</h2>
<div id="example3">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

CSS

/* -- normalize */
* { margin: 0; padding: 0; }
html, body { font-family: arial, sans-serif; font-size: 85%; }
h2:not(:first-child) { margin-top: 20px; }
h2 { font-weight: normal; margin-bottom: 5px; }
div { background-color: #eee; }


/* -- Beispiel #1 -- */
#example1 {
    margin: 0 auto;
    text-align: center;

    /** http://caniuse.com/#search=max-width */
    max-width: 400px;
}

#example1 a:first-child {
    float: left;
}

#example1 a:first-child + a + a {
    float: right;
}


/* -- Beispiel #2 */
#example2 {
    margin: 0 auto;

    /** http://caniuse.com/#search=max-width */
    max-width: 400px;
}

#example2:after {
	/** http://nicolasgallagher.com/micro-clearfix-hack/ */
    display: table;
    content: ' ';
    clear: both;
}

#example2 a {
    display: block;
    float: left;
    text-align: center;
    width: 33.3333333333%;
}


/* -- Beispiel #3 */
#example3 {
    margin: 0 auto;

    /** http://caniuse.com/#search=max-width */
    max-width: 400px;
}

#example3:after {
    /** http://nicolasgallagher.com/micro-clearfix-hack/ */
    display: table;
    content: ' ';
    clear: both;
}

#example3 a {
    display: block;
    float: left;
    text-align: center;
    width: 33.3333333333%;
}

#example3 a:first-child {
    text-align: left;
}

#example3 a:first-child + a + a {
    text-align: right;
}