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
<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

Lucas Zorzi

Responder

Posts

14/11/2017

Kelvin Andrade

Olá Lucas,

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.


table{
	width: 100%;
}

.user_image{
    float: left;
}




Espero te-lo ajudado..

Abraço.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar