Dividir ol em duas colunas
06/11/2017
0
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
[url:descricao=Foto de como está]https://forum.imasters.com.br/uploads/monthly_2017_11/comota.png.fbc985e3ca823c46798dc6af18f74786.png[/url]
Foto de como quero que fique
Código HTML
CSS:
Grato pela ajuda :)
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
[url:descricao=Foto de como está]https://forum.imasters.com.br/uploads/monthly_2017_11/comota.png.fbc985e3ca823c46798dc6af18f74786.png[/url]
Foto de 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 :)
Lucas Zorzi
Curtir tópico
+ 0
Responder
Posts
14/11/2017
Kelvin Andrade
Olá Lucas,
para conseguir o resultado que vc compartilhou na imagem, é só alterar para:
para conseguir o resultado que vc compartilhou na imagem, é só alterar para:
.panel_direito{ float: right; padding-left: 10em; }
Responder
14/11/2017
Marcelo Santana
Boa tarde, Lucas!
Faça essas alterações no seu css.
Espero te-lo ajudado..
Abraço.
Faça essas alterações no seu css.
table{ width: 100%; } .user_image{ float: left; }
Espero te-lo ajudado..
Abraço.
Responder
Clique aqui para fazer login e interagir na Comunidade :)