1

Olá, comecei agora a mexer com HTML5/CSS e estou fazendo alguns testes e me deparei com uma dificuldade. Estou tentando alinhar quatro listas ao lado de uma imagem, porém ela não fica alinhada.

O exemplo que estou me baseando é esse: https://prnt.sc/xz2029

inserir a descrição da imagem aqui

Segue abaixo meu código:

index.html

.conteudo-servicos {
    width: 1100px;
    margin: 0 auto;
    padding: 0px 48px;
    color: #000080;
    font-size: 25px;
}

.conteudo-servicos ul {
    display: inline-block;
    padding: 15px;
}
<div class="conteudo-servicos">
    <ul>
        <li>DEPARTAMENTO LEGAL</li>
        <li>- Abertura de Empresa</li>
        <li>- Alterações</li>
        <li>- Regularidade Fiscal</li>
        <li>- Licenciamento e Cadastros</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO FISCAL</li>
        <li>- Documentos Fiscais</li>
        <li>- Registro de Entradas e Saídas</li>
        <li>- Apurações Tributárias</li>
        <li>- Entrega das declarações</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO PESSOAL</li>
        <li>- E-Social</li>
        <li>- Registro de Funcionários</li>
        <li>- Folha de Pagamento</li>
        <li>- Gestão de Risco Trabalhista</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO CONTÁBIL</li>
        <li>- Balanço Patrimonial</li>
        <li>- Demonstração de Resultados</li>
        <li>- Análise Econômico Financeiro</li>
        <li>- Índices de Endividamento</li>
    </ul>                        
    <img src="newimg/14.png">
</div>

1 Resposta 1

1

Cara se vc quiser algo mais sofisticado te indico usar display:grid, mas se quer algo bem rápido e fácil vc pude separar as 4 UL em um container e colocar nele a propriedade column-count: 2; isso vai dividir o container em duas colunas, cada uma com 2 UL, e a imagem fica a direita desse container com column-count

Vai ficar como na imagem inserir a descrição da imagem aqui

Segue código

.conteudo-servicos {
  width: 1100px;
  margin: 0 auto;
  padding: 0px 48px;
  color: #000080;
  font-size: 25px;

  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
}

.listas {
  column-count: 2;
}
.listas > ul {
  margin: 0 auto 20px;
}
<div class="conteudo-servicos">
  <div class="listas">
    <ul>
      <li>DEPARTAMENTO LEGAL</li>
      <li>- Abertura de Empresa</li>
      <li>- Alterações</li>
      <li>- Regularidade Fiscal</li>
      <li>- Licenciamento e Cadastros</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO FISCAL</li>
      <li>- Documentos Fiscais</li>
      <li>- Registro de Entradas e Saídas</li>
      <li>- Apurações Tributárias</li>
      <li>- Entrega das declarações</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO PESSOAL</li>
      <li>- E-Social</li>
      <li>- Registro de Funcionários</li>
      <li>- Folha de Pagamento</li>
      <li>- Gestão de Risco Trabalhista</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO CONTÁBIL</li>
      <li>- Balanço Patrimonial</li>
      <li>- Demonstração de Resultados</li>
      <li>- Análise Econômico Financeiro</li>
      <li>- Índices de Endividamento</li>
    </ul>
  </div>
  <img src="https://via.placeholder.com/200x200.png?text=EU%20SOU%20UM%20PLACEHOLDER">
</div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .