Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ThiagoGoedert

div, float, width e etc...

Por , em Desenvolvimento frontend

Recommended Posts

ThiagoGoedert    0

ThiagoGoedert
Postado

Bom dia!

 

Tenho um espaço com 360px de largura, e preciso que três divs fiquem dentro dela e ocupem todo o espaço disponível.

 

Quero que fique assim:

 

W0RpEEX.jpg

 

Mas não está saindo muito como o esperado:

 

S1CmuAr.jpg

 

Eu não sei mexer muito nessas coisas de códigos, mas dando uma pesquisada aqui e outra ali, consegui montar o seguinte (o resultado é o da imagem acima):

<!DOCTYPE html>
<html>
<head>
<style>
data {
    width: 50px;
    padding: 10px;
    text-align: center;
    background-color: #686868;
    color: #ffffff;
    font-weight: bold;
}
tipo {
    width: auto;
    padding: 10px;
    text-align: center;
    background-color: #1d90bb;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
}
local {
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: #bfdeea;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
}
</style>
</head>
<body>

<data>16/03</data>
<tipo>tour</tipo>
<local>Mansfield, Massachusetts</local>
<br>
<data>16/03</data>
<tipo>tour</tipo>
<local>Mansfield, Massachusetts</local>

</body>
</html>

Andei pesquisando sobre float e outras coisas, mas nenhuma está dando certo.

 

O width da data é fixo (50px — já que o tamanho das datas sempre serão assim), do tipo é auto (pois uma vez será TOUR, PREMIAÇÃO, ETC) e o do local eu coloquei width: 100%, para que assim ocupasse todo o tamanho restante (infelizmente, não saiu como eu esperava).

 

Enfim, espero que alguém possa me ajudar.

Repetindo, não sei mexer direito nessas coisas, então desculpem meus prováveis erros bobos

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Você está criando uma página web? html/css?

 

Uma correção rápida que fiz, e aparentemente funcionou, foi essa:

 

em 'local', altere '100%' para 'auto';

local {
    width: auto;
}

adicione este código:

data, tipo, local {
    margin-bottom:10px;
    display:inline-block;
}

Espero que seja isso =D

Compartilhar este post

Link para o post
Compartilhar em outros sites

ThiagoGoedert    0

ThiagoGoedert
Postado

Estou (tentando) fazer um negócio para uma sidebar.

 

Deu uma melhorada sim, mas não ficou perfeito ainda.

 

Preciso que a segunda caixa azul ocupe todo o resto da linha, sabe?

 

Ela ficou assim:

 

d6rYcGc.jpg

 

(queria que ela tivesse o mesmo tamanho da de cima).

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Ok, consegui fazer as mudanças e aqui funcionou!

 

Ficaria assim:

section {
    width:360px;
    background:#f0f; /*apenas para testar, pode remover essa propriedade */
}
data, tipo, local {
    padding:5px;
    margin:0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    font-size:14px;
    display:block;
}
data {
    width: 50px;
    background-color: #686868;
    float:left;
}
tipo {
    width: auto;
    background-color: #1d90bb;
    float:left;
}
local {
    width: 100%;
    background-color: #bfdeea;
}

Eu coloquei alguns códigos semelhantes as 3 tags separados, assim se você precisar mudar, muda somente em um local. Apenas para simplificar.

 

Aqui está funcionando, você pode conferir nesse jsfiddle que criei: http://jsfiddle.net/q6jv2sop/1/

 

Edit:

Obs.: Pode ser que fique desconfigurado dependendo do tamanho do texto. Como você está utilizando uma largura fixa, se o texto for muito extenso, ele irá fazer a quebra.

 

Ex.: se você usar "premiação" no lugar de "tour", ele não terá largura suficiente. Ou você diminui o tamanho da fonte ou aumenta a largura dai. Ou então diminui a fonte somente na propriedade "local". Utilize font-size:10px; caso não precisa destacar muito essa opção.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito