0
votes

Comment puis-je arrêter mes divs intérieurs flottant les uns sur les autres

J'ai créé une carte à flip mais toutes les divs de la carte à l'intérieur de la carte semblent flotter les unes sur les autres. Je veux que les divs soient côtiers les uns des autres.

J'ai examiné beaucoup de questions mais je ne peux pas sembler trouver la réponse. J'ai essayé une variété d'affichage: en ligne; Position: relatif; flotteur: gauche; clarifier les deux; Mais je ne peux pas sembler avoir les divs les uns à côté de l'autre. P>

Quelqu'un peut-il le faire afin que les divs internes (".putmenextto") soient à côté de l'autre? p>

<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous">
</script>

<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card">
    <div class="flipcardFront">
      <!--I want the below divs to be next to each other -->
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <!--I want the below divs to be next to each other -->
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>



<script>
  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });
</script>

jquery html css

0 commentaires

3 Réponses :

0
votes

Peut-être que vous pourriez utiliser Flexbox à la place.

Par défaut, Flexbox affiche les enfants des enfants en rangées (vous avez plus d'options si vous voulez les alterner, etc ...) P>

Essayez d'ajouter ce qui suit Code sur flipcardback & Flipcardfront. p>

.card .flipcardFront {
  display:flex;
  flex-direction:row;  

  background: red;
}

.card .flipcardBack {
  display:flex;
  flex-direction:row;  

  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

0 commentaires

1
votes

J'ai fait quelques modifications

<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous">
</script>

<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card ss">
    <div class="flipcardFront">
      <!--I want the below divs to be next to each other -->
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <!--I want the below divs to be next to each other -->
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>



<script>
  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });
</script>

1 commentaires

Merci. Cela fonctionne bien pour arrêter les divs les uns sur les autres. Savez-vous comment je peux obtenir les divs pour flotter à côté de l'autre? Merci pour ton aide

1
votes

Utilisation float: gauche code>, spécifique largeur code> sur INTERN div et modifier le parent largeur: 300px code> de largeur: 100px code > Pour les autres les uns des autres, et changez Position: absolu code> à relative code>

p>



<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous">
</script>

<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card ss">
    <div class="flipcardFront">
      <!--I want the below divs to be next to each other -->
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <!--I want the below divs to be next to each other -->
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>



<script>
  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });
</script>

0 commentaires