Affichage fluide : deux Divs disposés côte à côte
P粉098979048
P粉098979048 2023-08-27 12:48:00
0
2
549
<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粉098979048
P粉098979048

répondre à tous(2)
P粉153503989

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.

P粉818317410

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;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal