Jump to content
acao

[Resolvido] tres div dentro de uma div

Recommended Posts

acao

boas

agradecia ajuda em colocar tres divs dentro de uma, formando tipo uma tabela com 1 linha e 3 colunas

tenho este codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>trescplunas</title>
<style type="text/css">
.div1{
  padding:10px;
  background-color:#FF0;}
.coluna1{
  width:30px;
  height:150px;
  float:left;
  background-color:#F00;}
.coluna2{
  width:50px;
  height:150px;
  float:left;
  background-color:#0F0;}
.coluna3{
  width:70px;
  height:150px;
  float:left;
background-color:#00F;}
</style>
</head>
<body>
<div class="div1">
<div class="coluna1">
</div>
<div class="coluna2">
</div>
<div class="coluna3">
</div>
</div>
</body>
</html>

cumps

acao

Edited by acao

Share this post


Link to post
Share on other sites
legd1991

Isso já está.. se na Div1 tirares o padding e meteres height:150px; que é a altura das outras divs vais ver que o resultado que queres, penso eu, é esse

Share this post


Link to post
Share on other sites
HappyHippyHippo

tens é um pequeno problema:

se a largura da div exterior for mais do que 150px, o que terás será:

+----------------------------------------------------+
|+-----++---------++---------+                       |
||     ||         ||         |                       |
||     ||         ||         |                       |
|+-----++---------++---------+                       |
+----------------------------------------------------+

usa percentagens de forma a que a soma destas seja 100%

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
     div {
         padding: 0;
         margin: 0;
         border: none;
     }
     .div1 {
         height:150px;
         background-color:#FF0;
         font-size: 0px;
         letter-spacing: 0px;
         word-spacing: 0px;
     }
     .coluna {
         height:100%;
         display: inline-block;
         font-size: 15px;
         letter-spacing: 1em;
         word-spacing: 2em;
     }
     .coluna1 {
         width:30%;
         background-color:#F00;
     }
     .coluna2 {
         width:40%;
         background-color:#0F0;
     }
     .coluna3 {
         width:30%;
         background-color:#00F;
     }
   </style>
 </head>
 <body>
   <div class="div1">
     <div class="coluna coluna1"></div>
     <div class="coluna coluna2"></div>
     <div class="coluna coluna3"></div>
   </div>
 </body>
</html>

Edited by HappyHippyHippo
  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
acao

boas

obrigado a todos pelas respostas.

@happyhippyhippo a sua dica resolveu, era trocar o «float:left» pelo «display:inline-block»

obrigado ()

edit: pensei que estivesse resolvido mas ainda não está

queria que a altura das divs fosse variavel

e

quando uma div interior for maior

as

outras ficarem coladas emcima

ou

ficarem da mesma altura que a maior.

assim ficam coladas ao fundo e a esquerda sem espaço no bottom:

<!DOCTYPE html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  div {
	  padding: 0;
	  margin: 0;
	  border: none;
  }
  .div1 {
	  height:100%;
	  background-color:#FF0;
	  font-size: 0px;
	  letter-spacing: 0px;
	  word-spacing: 0px;
  }
  .coluna {
	  height:100%;
	  display: inline-block;
	  font-size: 15px;
	  letter-spacing: 0em;
	  word-spacing: 0em;
  }
  .coluna1 {
	  width:30%;
	  background-color:#F00;
  }
  .coluna2 {
	  width:40%;
	  background-color:#0F0;
  }
  .coluna3 {
	  width:30%;
	  background-color:#00F;
  }
</style>
 </head>
 <body>
<div class="div1">
  <div class="coluna coluna1">
   <h1>teste coluna 1</h1>
  </div>
  <div class="coluna coluna2">
   <p>teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste vteste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste vteste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste vteste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste </p>
  </div>
  <div class="coluna coluna3">
   <h3>teste coluna 3</h3>
  </div>
</div>
 </body>
</html>

obrigado pela atenção

cumps

acao

edit: resolvido

obrigado pelas ajudas

cumps

acao

Edited by acao

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.