Aliñar tres divs en horizontal

A. Con block-inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            font-size: 0;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

O truco para que non se separen entre un pouco en horizontal é font-size: 0; no contenedor pai (wrapper)

B. Con float-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            
        }
        .wrapper{
            width:60%;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            float:left;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

C. Con flexbox.

Neste caso só configuramos o div contedor wrapper con display:flex. Nos div fillos non se configura nada. Neste caso non separa os div entre sí.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            margin:0 auto;
            display:flex;
            
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

 

a. Con flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            display:flex;
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            margin:0 auto;   
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
        background:red;
        width:20%;
        }
        .dereita{
        background:blue;
        width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

b. Con inline-block.

Neste caso o centrado non o resolve tan ben como con flexbox. Centramos o div wrapper con margin:0 auto;, sen embargo ao empregar display:inline-block nos div fillos, non permite centralos con margin:o auto; Para isto, no elemento pai, debemos de empregar text-align:center; Obviamente, sen queremos separar os elementos fillos entre eles, engadiríamos nos fillos un margin-right.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            position: relative;
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow:hidden;
            font-size: 0px;
            text-align: center;
                 
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline-block;
         
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
            background:red;
            width:20%;
        }
        .dereita{
            background:blue;
            width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

c. Con float

O div da esquerda colocámolo con float:left, e o da dereita con float:right. Sen embargo o do centro resístese. Nun principio aparecía cun tamaño inferior ao da esquerda e o da dereita. Iso corríxese con display:inline-block. Despois aparecía como desprazado da parte superior. Isto correxímolo con vertical-aligh:top. Por último aparecía este div do centro pegado ao div da esquerda, non obedecendo a margin:o auto; Esto último solucionase poñendo no elemento pai text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline;
       
        }
        .esquerda{
            background:green;
            width:20%;
            float:left;
        }

         .centro{
            display:inline-block;
            vertical-align: top;
            background:red;
            width:20%;
            
        }
        .dereita{
            background:blue;
            width:20%;
            float:right;
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

D. Só con float:left, engadindo a porcentaxe

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            float:left;
            width:31%;
            margin:0 1.16666%;
       
        }
        .esquerda{
            background:green;
        
        }

         .centro{
         
            background:red;
            
            
        }
        .dereita{
            background:blue;
        
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>