Caixas de Texto em Linha

Danny_Pt · September 28, 2013 at 09:38 PM

Estou a fazer um pequeno exercício. Criei uma div que por sua vez tem duas divs dentro de si. São caixas de texto. O que pretendia era que as caixas de texto aparecessem em linha e não uma por baixo da outra. Já usei o display inline-block, etc. Mas nada. Não sei que estou a fazer mal. Se alguém me puder ajudar.

Eu pretendia que as divs caixas1 aparecessem ambas em linha uma com a outra.

HTML

<html>
<head>
<title>BEPI</title>
<link rel="stylesheet" href="box.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="caixas">
<div class="caixas1">
<center><img src="imagens/mota1.png" /></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor non sapien nec bibendum. Duis nisi massa, lobortis.
</div>
<div class="caixas1">
<center><img src="imagens/mota1.png" /></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor non sapien nec bibendum. Duis nisi massa, lobortis.
</div>
</div>
</body>
</html>

CSS:

.caixas1{
background: url(imagens/box.png);
width:220px;
height:244px;
text-align:center;
font-family:tahoma;
color:white;
font-size:small;
margin-left:auto;
margin-right:auto;
}
.caixas1 img{
padding:5px;
}
.caixas{
margin-left:auto;
margin-right:auto;
display:inline;
position:relative;
}

Edited September 29, 2013 at 05:29 PM by brunoais
geshi

Virneto · September 28, 2013 at 10:59 PM

Precisas de utilizar float.

<div id="caixas">
<div id="caixa1" class="cx">Caixa1
</div>

<div id="caixa2" class="cx">Caixa2
</div>
</div>

#caixas {
width:100%;
border-style:solid;
border-color:yellow;
height:210px;
}

#caixa1 {
float:left;
}

#caixa2 {
float:left;
}

.cx {
width:200px;
height:200px;
border-style:solid;
border-width:2px;
border-color:black;
background: url(imagens/box.png);
text-align:center;
color:blue;
}

Have fun! 👍

Danny_Pt · September 29, 2013 at 12:40 PM

Eu consegui usando o float left de facto...mas fiquei com 2 problemas...lol.

Queria um pequeno espaço entre as duas imagens, pois ficam quase juntas. E queria alinhá-las ao cento em vez da esquerda.

Como faço isso?

Obrigado 🙂

Virneto · September 29, 2013 at 05:32 PM

Como faço isso?

para centrar adiciona a #caixas:

  display:block;
  margin-left:auto;
  margin-right:auto;

e para as margens trabalha com margin e padding!

margin é o espaço entre elementos. padding é o espaço entre a div e o conteúdo da div (interno).

Não sei exatamente o que pretendes mas a boa notícia é que só tens de experimentar. 😁

brunoais · September 29, 2013 at 05:47 PM

Tens aqui uma base com que trabalhar:

http://jsfiddle.net/53HYU/

Não está completo mas tem a base de trabalho para o que queres.

Pessoalmente, só uso os floats quando todo o resto falha ou quando revela ser realmente a melhor opção. Neste caso, na minha opinião, nem de perto...

Danny_Pt · September 29, 2013 at 07:57 PM

Obrigado a ambos.

Vou dar uma olhada 🙂

para centrar adiciona a #caixas:
  display:block;
  margin-left:auto;
  margin-right:auto;
e para as margens trabalha com margin e padding!

margin é o espaço entre elementos. padding é o espaço entre a div e o conteúdo da div (interno).

Não sei exatamente o que pretendes mas a boa notícia é que só tens de experimentar. 😁

Eu já tinha experimentado adicionar o margin-left e right em auto na div caixas, mas não funciona...não entendo porquê :\

Obrigado na mesma 🙂

brunoais · October 1, 2013 at 01:15 PM

Eu já tinha experimentado adicionar o margin-left e right em auto na div caixas, mas não funciona...não entendo porquê :\

Falta do ponto e virgula, provavelmente.

Sign In

Caixas de Texto em Linha

Recommended Posts

Danny_Pt

Virneto

Danny_Pt

Virneto

brunoais

Danny_Pt

brunoais

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information