Alinhar um texto horizontalmente com diferentes conteúdos

[NFelipeFL 1]

Gostaria de alinhar o TEXTO 1, TEXTO 2 e TEXTO 3 como na figura abaixo e no exemplo:

 

CONTEÚDO TEXTO 1 | CONTEÚDO TEXTO 2 | CONTEÚDO TEXTO 3

 

sendo que gostaria que cada texto entrasse em uma div...

 

Obrigado.

[Emet 6]

Fiz assim: http://codepen.io/alvesnatan/pen/xGbXww

OBS¹: Usei [inline]sections [/inline]ao invés de [inline]divs[/inline] mas caso realmente queira usa-lás basta alterar.

 

 

OBS²: A abertura das tags [inline]section[/inline] ao término da anterior é proposital pois isso evita que os elementos se empilhem quando a janela for redimensionada.

[L. Henrique 179]

NFelipe,

Para alinhar 3 div's, sections, tables, etc., basta você declará-las no CSS como "inline-block" pra que fiquem na mesma linha horizontal.

¹Caso queira conferir o que pediu, clique no link do JSFiddle.

²Caso não consiga acessar o JSFiddle ou não queira, segue código abaixo.
HTML:

<nav>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</nav>

<div class="textoum">
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</div>
<div class="textodois">
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</div>
<div class="textotres">
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</div>

CSS:

html,
body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

nav{
    width: 100%;
    height: 60px;
    background: #131313;
}

    nav ul{
        font-family: arial;
        text-transform: uppercase;
        line-height: 60px;
    }

        nav ul li{
            list-style-type: none;
            display: inline-block;
        }

            nav ul li a{
                text-decoration: none;
                outline: 0;
                color: #fff;
                padding-top: 21px;
                padding-bottom: 22px;
                padding-left: 8px;
                padding-right: 8px;
                -webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                transition: all 0.2s ease;
            }

                nav ul li a:hover{
                    color: #2196F3;
                    background: #000;
                }

.textoum,
.textodois,
.textotres{
    width: 32%;
    height: auto;
    display: inline-block;
    text-align: justify;
    padding: 3px;
}

Bom, cada DIV ocupa 32% da página, então podemos concluir que se reduzirmos essa página, o terceiro texto será jogado para baixo. Essa é uma solução plausível, mas para manter o site responsivo, seria necessário que adicionasse um @max-width, assim, quando o site fosse reduzido e o texto três fosse para baixo, a coluna 1 e 2 ocupariam o restante do espaço, idem se a 2 também for para baixo.

[NFelipeFL 1]

Amigos, obrigado.

 

Tentei o section porém achei mais fácil manipular o DIV do Hantaroo!

Ficou do jeito que precisava!

 

Abraços!