Jump to content
bundao

Dividir ol em duas colunas

Recommended Posts

Eu quero fazer uma linha com duas colunas

 

estou usando ol e tentei dividir a ol usando uma table de duas colunas dentro da ol

 

 a primeira coluna com float: left e a segunda com float:right

 

 mas por algum motivo isso não funciona

 

Na foto mostra como está e como quero que fique

 

Código HTML

<li class="linha_pergunta">
	<table>
		<tr>
			<td class="panel_esquerdo">
				<div class="titulo_pergunta">
					<span>pergunta</span>
				</div>

				<div class="data_postagem">
					<span>Postado em </span> data
				</div>
			</td>

			<td class="panel_direito">
                                    
				<div class="user_image">
					<img [...]/>
				</div>

				<div class="user_name">
					<span>nome usuario</span>
				</div>
			</td>
		</tr>
	</table>
</li>

CSS:

ol{
    list-style: none;
}

.linha_pergunta{
    padding-top: 0.5em;
    padding-left: 5px;
    width: auto;
    padding-bottom: 0.5em;
}

.panel_esquerdo{
    float: left;
}

.panel_direito{
    float: right;
  	padding-right: 10em;
}

.titulo_pergunta{
    font-size: 18px;
}

.user_image{
    float: center;
}


.data_postagem{
    font-size: 12px;
    color: gray;
}

 

Grato pela ajuda :)

ficar.png

comota.png

Share this post


Link to post
Share on other sites

Tipo isso?

 

Spoiler

<html>
    <head>
        <style>
            .esquerda, .direita {
                min-height: 3rem
            }
            .esquerda {
                background-color: red;
                float: left;
                width: 70%;
            }
            .direita {
                background-color: blue;
                float: right;
                width: 30%;
            }
        </style>
    </head>

    <body>
        <div class="esquerda">Conteúdo aqui dentro</div>
        <div class="direita">imagem aqui</div>

        <div style="clear: both"></div>

        Conteúdo que vem abaixo
    </body>
</html>

 

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites

Boooooooa, funcionou perfeitamente!!

 

Vi que com essa linha um espaço é adicionado abaixo das div, sem ele não.

 

Poderia me explicar como isso funciona?

7 horas atrás, Omar~ disse:

<div style="clear: both"></div>

 

Share this post


Link to post
Share on other sites

Em resumo. Isso previne que qualquer float escape do local onde está, invadindo/sobrepondo outros conteúdos.

 

  • +1 1

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

  • Similar Content

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.