recherche

Maison  >  Questions et réponses  >  le corps du texte

Affichage fluide : deux Divs disposés côte à côte

<p>J'essaie de placer deux divs côte à côte et d'utiliser le CSS suivant. </p> <pre class="brush:css;toolbar:false;">#left { flotteur : gauche ; largeur : 65 % ; débordement caché; } #droite { débordement caché; } ≪/pré> <p>HTML est très simple, un div wrapper contient deux div à gauche et à droite. </p> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <div id="left">Côté gauche div</div> <div id="right">Côté droit div</div> </div> ≪/pré> <p>J'ai essayé plusieurs fois sur StackOverflow et d'autres sites pour trouver une meilleure solution, mais je n'ai trouvé aucune aide définitive. </p> <p>Donc, à première vue, le code fonctionne bien. Le problème est que lorsque j'augmente la largeur (%), le div gauche obtient automatiquement un remplissage/marge. Ainsi, à 65 % de largeur, le div gauche a un peu de remplissage ou de marge et n'est pas parfaitement aligné avec le div droit, j'ai essayé de définir le remplissage/marge sur 0 sans succès. Deuxièmement, si je zoome sur la page, le div droit glisse sous le div gauche, ce qui ressemble à un affichage saccadé. </p> <p>Remarque : Désolé, j'ai vérifié beaucoup d'informations. Cette question a été posée plusieurs fois mais ces réponses ne m'ont pas aidé. J'ai expliqué quel était le problème dans mon cas. </p> <p>J'espère que cela pourra être résolu. </p> <p>Merci. </p> <p>Edit : Désolé pour mon problème HTML, il y a deux div "box" à gauche et à droite, leur remplissage est en %, donc le côté gauche affiche plus de remplissage en raison de la plus grande largeur. Désolé, le CSS ci-dessus fonctionne parfaitement, il s'affiche correctement et est corrigé, désolé d'avoir posé la mauvaise question...</p>
P粉098979048P粉098979048533 Il y a quelques jours574

répondre à tous(2)je répondrai

  • P粉153503989

    P粉1535039892023-08-28 00:22:48

    Essayez un système comme celui-ci :

    .container {
      width: 80%;
      height: 200px;
      background: aqua;
      margin: auto;
      padding: 10px;
    }
    
    .one {
      width: 15%;
      height: 200px;
      background: red;
      float: left;
    }
    
    .two {
      margin-left: 15%;
      height: 200px;
      background: black;
    }

    Si vous utilisez margin-left sur un autre div égal à la largeur du premier div, faites simplement flotter un div. Cela fonctionne quel que soit le niveau de zoom et il n'y a aucun problème de sous-pixels.

    répondre
    0
  • P粉818317410

    P粉8183174102023-08-28 00:20:32

    Utilisation de ce CSS pour mon site Web actuel. L'effet est parfait !

    #sides{
    margin:0;
    }
    #left{
    float:left;
    width:75%;
    overflow:hidden;
    }
    #right{
    float:left;
    width:25%;
    overflow:hidden;
    }

    répondre
    0
  • Annulerrépondre