Ir para conteúdo

Arquivado

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

Poligno

posicionamento das "div"

Por , em Desenvolvimento frontend

Recommended Posts

Poligno    1

Poligno
Postado

Eu estava praticando HTML e minha intenção era colocar 3 quadros um do lado do outro com um pequeno texto dentro de cada um usando "div's" (display:inline-block),mas se um deles fica com um texto com menos linhas do que o anterior ele nivela automaticamente os quadros para que a ultima linha de cada texto fique alinhada,reta uma na outra,assim fica um quadro mais pra baixa,outro mais pra cima,não ficam alinhados como eu gostaria que ficassem,como eu posso corrigir isso?

 

 

Código em HTML

<!DOCTYPE html>

<html>

<head>

<!-- <link type="text/css" rel="Untitled-1.css" href="Untitled-1.css" media="all"> !-->

<link rel="stylesheet" type="text/css" href="Untitled-1.css" />

<title>

Anao Grande

</title>

</head>

<body>

 

<div id="com">

<h1>Comunismo</h1>

<center><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Hammer_and_sickle.svg/150px-Hammer_and_sickle.svg.png"/></center>

<p>Comunismo (do latim communis - comum, universal "coisa - pública", segundo Platão) é uma ideologia política e socioeconômica e assunto de econometria, que pretende promover o estabelecimento de uma sociedade igualitária, sem classes sociais e apátrida, baseada na propriedade comum e no controle dos meios de produção.

O seu principal mentor filosófico, Karl Marx, postulou que o comunismo seria a fase final na sociedade humana e que isso seria alcançado através de uma revolução proletária (revolução social, do "Povo nas Ruas", segundo palavras do próprio Karl Marx). O "comunismo puro", no sentido marxista refere-se a uma sociedade sem classes, sem Estado e livre de opressão, onde as decisões sobre o que produzir e quais as políticas devem prosseguir são tomadas democraticamente a nível somente e exclusivamente de Mercado e não de "Mercadologias de Estado e/ou Particulares" segundo suas palavras, e permitindo dessa maneira que cada membro da sociedade organizada possa participar do processo decisório pela não manipulação de preços, tanto na esfera política e econômica da vida pública e/ou privada.</p>

</div>

 

 

<div id="ana">

<h1>Anarquismo</h1>

<center><img src="http://rationalwiki.org/w/images/thumb/4/46/Symbol.png/150px-Symbol.png"/></center>

<p>O Anarquismo é uma filosofia política que engloba teorias, métodos e ações que objetivam a eliminação total de todas as formas de governo compulsório e de Estado.5 De um modo geral, anarquistas são contra qualquer tipo de ordem hierárquica que não seja livremente aceita6 e, assim, preconizam os tipos de organizações libertárias baseadas na livre associação.

Há diversas escolas de pensamento e tradições de anarquismo, as quais não são mutuamente exclusivas.7 Cada vertente do anarquismo tem uma linha de compreensão, análise, ação e edificação política específica, embora todas vinculadas pelos ideais base do anarquismo. Correntes do anarquismo tem sido divididas em anarquismo social e anarquismo individualista, ou em classificações semelhantes.A maioria dos anarquistas são apartidários; se opõe ao Estado e a qualquer regime ditatorial, apoiando a autodefesa ou a não violência.

Outro conceito, a propaganda pelo ato, apesar de ter tido um início violento, hoje em dia incorporou diversos tipos de ações não violentas.

</p>

</div>

 

 

<div id="cap">

<h1>Capitalismo</h1>

<center><img src="https://cdn3.iconfinder.com/data/icons/minicons-for-web-sites/24/minicons-97-128.png"/></center>

<p>O capitalismo é um sistema econômico em que os meios de produção, distribuição, decisões sobre oferta, demanda, preço, e investimentos são em grande parte ou totalmente de propriedade privada e com fins lucrativos e não são feitos pelo governo. Os lucros são distribuídos para os proprietários que investem em empresas. Predomina o trabalho assalariado. É dominante no mundo ocidental desde o final do feudalismo.O termo capitalismo foi criado e utilizado por socialistas e anarquistas (Karl Marx, Proudhon, Sombart) no final do século XIX e no início do século XX, para identificar o sistema político-econômico existente na sociedade ocidental quando se referiam a ele em suas críticas, porém, o nome dado pelos idealizadores do sistema político-econômico ocidental, os britânicos John Locke e Adam Smith, dentre outros, já desde o início do século XIX, é liberalismo.</p>

</div>

 

 

 

</body>

</html>

 

Código em CSS

div{

display: inline-block;

height: 800px;

width: 390px;

margin-top: 5px;

 

 

}

 

#com{

 

background-color: red;

border: 5px solid rgb(201, 8, 8);

}

 

#ana{

 

background-color:#221f1f;

border: 5px solid #000;

}

 

 

#cap{

background-color:yellow;

border: 5px solid #c9c90a;

}

 

 

 

h1{

text-align: center;

}

Grato!

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Uma solução que eu acho simples é utilizar Flexbox (Navegadores que suportam).

 

Como seus divs estão diretamente no body, a regra ficaria assim:

 

 

body {
  width: 100%;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: center;
}
RESULTADO

 

E um teste ( src )

Compartilhar este post

Link para o post
Compartilhar em outros sites

bdexterholland    0

bdexterholland
Postado

Normalmente eu faço isto usando o vertical-align:top;

 

 

div{
    display: inline-block;
    height: 800px;
    width: 390px;
    margin-top: 5px;
    vertical-align: top;
    
}

#com{
    
    background-color: red;
    border: 5px solid rgb(201, 8, 8);
    vertical-align: :top;
    }

#ana{
    
    background-color:#221f1f;
    border: 5px solid #000;
    vertical-align: top;
    }


#cap{
    background-color:yellow;
    border: 5px solid #c9c90a;
    vertical-algin: top;
   }



h1{
    text-align: center;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poligno    1

Poligno
Postado

Uma solução que eu acho simples é utilizar Flexbox (Navegadores que suportam).

 

Como seus divs estão diretamente no body, a regra ficaria assim:

 

 

body {
  width: 100%;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: center;
}
RESULTADO

 

E um teste ( src )

 

 

Consegui consertar só com o "display:flex;" dentro do body.

Valeu pessoal!

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