Início / coding / Perguntas / 79565210
Accepted
Sheena Dessai
Asked: 2025-04-10 03:36:00 +0800 CST

Como fazer com que as Divs apareçam lado a lado sem alterar a estrutura HTML, usando apenas CSS

  • 772

Quero emparelhar cada div .dropdown-select com seu div .phone correspondente, de modo que:

  • O primeiro .dropdown-select e o primeiro .phone aparecem na mesma linha,
  • O segundo .dropdown-select e o segundo .phone aparecem na próxima linha, e assim por diante.

O .dropdown-select ocupará 25% do espaço e o .phone ocupará 75% do espaço.

As divs são geradas dinamicamente, portanto, não posso alterar o posicionamento nem modificar a estrutura HTML. Preciso usar CSS integralmente para o posicionamento. Tentei diferentes técnicas, sem sucesso.

E as divs com classe como texto não devem ser afetadas pelo flex (não devem ser alteradas), apenas divs com classe dropdown-select e phone.

/* Main container that holds all the input fields */
.contactFormContainer .field__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* Ensure each .dropdown-select and .phone div takes up 50% of the container width */
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
  display: flex;
  flex-direction: column;
  width: calc(50% - 5px);
  /* Make sure each takes up 50% of the space with 5px margin */
}

/* Ensure input fields inside dropdown-select and phone take full width */
.contactFormContainer .dropdown-select__input,
.contactFormContainer .phone__container input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* The .text divs remain as block-level elements */
.contactFormContainer .text {
  display: block;
  margin-bottom: 10px;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  .contactFormContainer .field__group {
    flex-direction: column;
    /* Stack everything vertically on small screens */
  }

  .contactFormContainer .dropdown-select,
  .contactFormContainer .phone {
    width: 100%;
    /* Full width for small screens */
  }
}
<div class="contactFormContainer">
  <div class="field__group">
    <div class="text">
      <label for="per_email_1">
            Personal eMail 1
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_1" aria-label="per_email_2" id="per_email_1_a_1"
            placeholder="Personal eMail 2" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="text">
      <label for="per_email_2">
            Personal eMail 2
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_2" aria-label="office_email_1" id="per_email_2_a_1"
            placeholder="Office Email1" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="text">
      <label for="per_email_3">
            Personal eMail 3
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_3" aria-label="office_email_2" id="per_email_3_a_1"
            placeholder="Office Email 2" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="dropdown-select " id="mobile_1">
      <label for="mobile_1">
            Mobile No. 1
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_1_a_1" placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_2">
      <label for="mobile_2">
            Mobile No. 2
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_2_a_1" placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_3">
      <label for="mobile_3">
            Mobile No. 3
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_3_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_4">
      <label for="mobile_4">
            Mobile No. 4
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_4_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_5">
      <label for="mobile_5">
            Mobile No. 5
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_5_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_6">
      <label for="mobile_6">
            Mobile No. 6
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_6_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="phone" id="mobile_1_add">
      <label for="mobile_1_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_1_add" id="mobile_1_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_2_add">
      <label for="mobile_2_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_2_add" id="mobile_2_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_3_add">
      <label for="mobile_3_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_3_add" id="mobile_3_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_4_add">
      <label for="mobile_4_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_4_add" id="mobile_4_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_5_add">
      <label for="mobile_5_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_5_add" id="mobile_5_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_6_add">
      <label for="mobile_6_add">
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_6_add" id="mobile_6_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
  </div>
</div>

html

2 respostas

  1. Best Answer

    Você precisa de uma grade para isso. Um dos recursos poderosos de uma grade é a capacidade de posicionar elementos específicos em locais específicos (células) usando grid-columne/ou grid-row.

    Em telas estreitas (de telefone), onde sua grade terá uma única coluna, você precisará manter seus .dropdown-selecte correspondentes .phonejuntos, usando algo assim:

    #mobile_1     {grid-row: 4;}
#mobile_1_add {grid-row: 5;}
#mobile_2     {grid-row: 6;}
#mobile_2_add {grid-row: 7;}
#mobile_3     {grid-row: 8;}
#mobile_3_add {grid-row: 9;}
#mobile_4     {grid-row: 10;}
#mobile_4_add {grid-row: 11;}
#mobile_5     {grid-row: 12;}
#mobile_5_add {grid-row: 13;}
#mobile_6     {grid-row: 14;}
#mobile_6_add {grid-row: 15;}

    O resultado da tela estreita fica assim:

    insira a descrição da imagem aqui

    Em telas largas, configure seu modelo de grade com duas colunas e nove linhas, grid-auto-flow: columnde modo que os itens da grade preencham a primeira coluna antes de começar na segunda. Você também precisará de unsettodos os grid-rowestilos configurados para telas estreitas.

    O resultado em tela ampla fica assim:

    insira a descrição da imagem aqui

    Aqui está um trecho que contém uma demonstração totalmente responsiva; em outras palavras, implementa ambos os layouts. Após executá-lo, use o link da página inteira para visualizá-lo corretamente e testar o comportamento responsivo.

    body, input {
  font-family: sans-serif;
  font-size: 16px;
}

body {
  background: #eee;
  margin: 1em;
}

.contactFormContainer {

  label {
    font-size: 14px;
    color: #666;
  }
  
  input {
    background-color: white;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    box-sizing: border-box;
    margin-top: 0.15em;
  }

  .field__group {
    display: grid;
    grid-template-columns: auto;
    gap: 0.6em 1em;
  }
  
  #mobile_1     {grid-row: 4;}
  #mobile_1_add {grid-row: 5;}
  #mobile_2     {grid-row: 6;}
  #mobile_2_add {grid-row: 7;}
  #mobile_3     {grid-row: 8;}
  #mobile_3_add {grid-row: 9;}
  #mobile_4     {grid-row: 10;}
  #mobile_4_add {grid-row: 11;}
  #mobile_5     {grid-row: 12;}
  #mobile_5_add {grid-row: 13;}
  #mobile_6     {grid-row: 14;}
  #mobile_6_add {grid-row: 15;}

  /* styles for wider screens */
  @media (min-width: 600px) {

    .field__group {
      grid-template-columns: 1fr 3fr;
      grid-template-rows: repeat(9, auto);
      grid-auto-flow: column;
    }

    .text {
      grid-column: span 2;
    }
    
    #mobile_1, #mobile_1_add,
    #mobile_2, #mobile_2_add,
    #mobile_3, #mobile_3_add,
    #mobile_4, #mobile_4_add,
    #mobile_5, #mobile_5_add,
    #mobile_6, #mobile_6_add {
      grid-row: unset;
    }
  }    
}
    <div class="contactFormContainer">
  <div class="field__group">
    <div class="text">
      <label for="per_email_1">
            Personal eMail 1
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_1" aria-label="per_email_2" id="per_email_1_a_1"
            minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="text">
      <label for="per_email_2">
            Office eMail 1
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_2" aria-label="office_email_1" id="per_email_2_a_1"
            minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="text">
      <label for="per_email_3">
            Office eMail 2
          </label>
      <div class="text__count   ">
        <input type="Text" name="per_email_3" aria-label="office_email_2" id="per_email_3_a_1"
            minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
            value="">
      </div>
    </div>
    <div class="dropdown-select " id="mobile_1">
      <label for="mobile_1">
            Dropdown No. 1
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_1_a_1" placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_2">
      <label for="mobile_2">
            Dropdown No. 2
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_2_a_1" placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_3">
      <label for="mobile_3">
            Dropdown No. 3
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_3_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_4">
      <label for="mobile_4">
            Dropdown No. 4
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_4_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_5">
      <label for="mobile_5">
            Dropdown No. 5
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_5_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="dropdown-select " id="mobile_6">
      <label for="mobile_6">
            Dropdown No. 6
          </label>
      <div class="dropdown-container">
        <div class="dropdown-select__field ">
          <input type="text" class="dropdown-select__input" id="mobile_6_a_1"
              placeholder="">
        </div>
      </div>
      <span class="">
          </span>
    </div>
    <div class="phone" id="mobile_1_add">
      <label for="mobile_1_add">
            Phone No. 1
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_1_add" id="mobile_1_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_2_add">
      <label for="mobile_2_add">
            Phone No. 2
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_2_add" id="mobile_2_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_3_add">
      <label for="mobile_3_add">
            Phone No. 3
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_3_add" id="mobile_3_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_4_add">
      <label for="mobile_4_add">
            Phone No. 4
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_4_add" id="mobile_4_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_5_add">
      <label for="mobile_5_add">
            Phone No. 5
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_5_add" id="mobile_5_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
    <div class="phone" id="mobile_6_add">
      <label for="mobile_6_add">
            Phone No. 6
          </label>
      <div class="phone__container ">
        <input type="text" name="mobile_6_add" id="mobile_6_add_a_1" placeholder=""
            minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
      </div>
    </div>
  </div>
</div>

    Depois de executar este snippet, use o link da página inteira para vê-lo corretamente e testar o comportamento responsivo.

    Você sabia que agora é possível usar aninhamento em CSS? Isso torna seu código mais sucinto e fácil de ler.

    • 1

  2. Use flex-direction: row;e flex-direction: column;conforme necessário para especificar se os elementos filhos serão alinhados horizontalmente ou verticalmente

    • -1

relate perguntas