Dev Faq
0
votes

Définir la largeur égale dynamique sur tous les éléments

Je crée un modal avec quelques informations. Parfois, j'ai un texte court, parfois plus longtemps. Je veux avoir une bonne recherche modale, égale modale. Mon projet utilise également une traduction en quelques langues, de sorte que les chaînes ont également une longueur différente selon la langue actuelle.

Puis-je faire quelque chose pour un bon modal dans tous les cas? Ma première idée est définie une largeur de grande largeur pour nom et classe de courrier électronique code> (code commenté), puis fonctionne bien, toutes les colonnes sont égales et modales a l'air bien. Mais maintenant, je pense à une solution meilleure et plus universelle. J'essayais d'utiliser flexas / rétrécir / croissance CODE> dans une configuration, mais rien n'a donné de bon effet. P>

p> 

<div class="container">
  <div class="row">
    <div class="name">
      <p>LoremIpsum</p>
    </div>
    <div class="email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>LoremIpsum</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>Lorem Ipsum Lorem</p>
    </div>
    <div class="email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>Lorem Ipsum</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>LoremIpsumLoremIpsumLorem</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
</div>

4 commentaires

Vous pouvez utiliser Bootstrap pour votre besoin: w3schools.com/bootstrap4

Vous voulez que des articles soient alignés dans des lignes et des colonnes? Si c'est le cas, avez-vous examiné la grille CSS à la place?

@ Ivans95 J'y pense toujours. Peut-être que la table HTML est également une bonne solution?

Je ne recommanderais pas d'utiliser des tables pour la mise en page, uniquement si elle utilisait des données tabulaires ... mais pour un mode modal, je pense que c'est mieux à coller avec Flexbox ou des grilles

3 Réponses :

1
votes

Pour une situation comme celle-ci, j'utilise généralement Bootstrap JavaScript Bibliothèque. Fondamentalement Bootstrap divise chaque ligne en 12 colonnes unitaires égales et vous pouvez choisir le nombre de colonnes de l'unité que votre colonne doit contenir. Comme nous avons 3 colonnes dans chaque ligne ici, nous pouvons choisir 4 colonnes unitaires pour chaque colonne de la vôtre. Après avoir ajouté une dépendance bootstrap à l'aide de: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>Lorem Ipsum Lorem</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>Lorem Ipsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsumLoremIpsumLorem</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
</div>

0 commentaires
0
votes

Vous pouvez l'avoir utilisé à l'aide de la propriété de largeur: xxx

essayez ici: https : //jsfiddle.net/6bl57yd2/

Bien sûr, vous pouvez modifier le montant que vous le souhaitez.

0 commentaires
0
votes

Enfin, j'ai décidé d'utiliser HTML

code> étiquette pour résoudre ce problème. Données affichant la fonction de la carte dans Reall, et je pense que mes informations modales sont des données tabulaires, donc je soupçonne
code> est une solution acceptable. Maintenant, chaque élément TD code> a la largeur de la même manière que l'élément le plus large de la table code>. Solution ci-dessous:

p> 

<table>
  <tr>
    <td class="name">
      Lorem ipsum Lorem ipsum
    </td>
    <td class="email">
     Loremipsum@dolorsit.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempora dolore delectus dolores, et esse eum dignissimos ullam voluptas impedit veritatis neque, odio unde corporis iure dolorum consectetur est necessitatibus.
    </td>
  </tr>
   <tr>
    <td class="name">
      Lorem ipsum Lorem
    </td>
    <td class="email">
     Loremipsumdolorsit@dolorsit.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempora dolore delectus dolores, et esse eum dignissimos ullam voluptas impedit veritatis neque.
    </td>
  </tr>
   <tr>
    <td class="name">
      Lorem ipsum
    </td>
    <td class="email">
     Loremipsum@dolor.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </td>
  </tr>
</table>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor