Deux divs côté par côté - Liquide d'affichage

Je suis en train de placer deux divs côte à côte et en utilisant le code CSS suivant pour elle.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

Le HTML est simple, deux à gauche et à droite div dans une div wrapper.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

J'ai essayé tant de fois à la recherche d'une meilleure façon sur StackOverflow et d'autres sites aussi, Mais ne pouvait pas trouver exactement les aider.

Donc, le code fonctionne très bien au premier coup d'œil. Problème est ce, que la gauche div obtient padding/margin automatiquement comme je l'augmentation de la largeur en (%). Donc, à 65% de la largeur, de la gauche de la div est d'avoir quelques rembourrage ou de la marge et n'est pas parfaitement aligné avec le droit de la div, j'ai essayé de padding/margin 0 mais pas de chance. Deuxièmement, Si je zoom dans la page, le droit div diapositives ci-dessous la gauche de la div, comme Son pas de liquide d'affichage.

Note: je suis désolé, j'ai beaucoup cherché. Cette question a été posée plusieurs fois, mais ces réponses ne sont pas à m'aider. J'ai expliqué ce qu'est le problème dans mon cas.

J'espère qu'il y aura un correctif pour que les.

Merci.

EDIT: Désolé, moi HTML de problème, Il y avait deux "box" divs dans les deux côtés gauche et droit, Ils avaient rembourrage en %, Donc de gauche a montré plus de rembourrage en raison d'une plus grande largeur. Désolé, Le CSS ci-dessus fonctionne parfaitement, son liquide d'affichage et fixe, Désolé de poser la mauvaise question...

Il y avait deux boîte de divs? Est-ce qu'une boîte de div? Cette question n'est pas claire.

InformationsquelleAutor Waleed | 2013-06-20

232

Violon

Essayer un système comme ceci à la place:

HTML:
```
<section class="container">
    <div class="one"></div>
    <div class="two"></div>
</section>
```
CSS:
```
.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;
}
```
Vous avez seulement besoin de flotter une div si vous utilisez de la marge de gauche de l'autre égale à la première div de largeur. Cela fonctionne quel que soit le zoom et n'aura pas de sous-pixel problèmes.
- Il n'est pas d'aider, le zoom chose est fixe maintenant, il est dit fixe, mais le droit de la div est maintenant slided vers le bas et fixe dans cette position
- Vous avez probablement foiré quelque chose, vérifiez votre code, ou dites-moi le lien vers le jsFiddle et de mauvais œil.
- oh man, je suis désolé. Les divs ont déjà été fixés par ma au-dessus de CSS que j'ai donné, c'est juste la "box" divs à la fois de droite et de gauche, avait du rembourrage et de la marge en %, parce que le droit div a été de courte c'est pourquoi, Il avait enqual remplissage et les marges. Désolé...
InformationsquelleAutor dezman
187

C'est facile avec un flexbox:

CSS:
```
#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}
```
HTML:
```
<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>
```
- Nice, flexbox est certainement le chemin à parcourir
- Selon ce site, flex devrait fonctionner sur 94% des navigateurs. caniuse.com/#search=flex
- Qui est de 1 pour 20 personnes incapables d'utiliser votre site... Est-ce vraiment une option?
- n'est-ce pas que 94% des différents navigateurs disponibles (comme il fonctionne toujours sur chrome, Mozilla, IE, etc etc), non pas que cela fonctionne 94% du temps quel que soit le navigateur?
- Pas de. C'est le nombre d'utilisateurs des navigateurs qui ne sont ou ne prennent pas en charge la fonctionnalité.
- Actuellement, il s'élève à 97+%. En gros, je dirais que si vous n'avez pas besoin de cible IE8, aller avec flexbox, dans ce cas et d'autres. Flexbox solutions sont presque toujours plus élégante et la plus facile de raisonner sur.
- même alors, le ciblage IE11 signifie que vous devez être conscient des Problèmes Connus (il y en a 8 sur caniuse.com à l'heure actuelle)
- Si vous avez déjà un site web, ne jamais passer par le navigateur de l'action, regardez votre propre registres de trafic. Sur la plupart de mes sites, IE8 ne représente que 0,01% de la circulation. Cependant...j'ai vu des sites spécifiques où le public est utilisateurs dans les entreprises, le gouvernement, les organisations à but non lucratif qui utilise beaucoup de logiciels existants, et puis les vieux IE l'utilisation du navigateur peut être étonnamment élevé.
- Totalement la manière d'entrer en 2019!
InformationsquelleAutor
90

À l'aide de ce code CSS de mon site actuel. Il fonctionne parfaitement!
```
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 
```
- float:left; est très important sur le #droit.
- Heureux d'entendre que vous avez trouvé et accepté votre propre réponse, mais qu'est-ce que #les côtés? Il n'est pas dans votre question initiale.
- À l'aide float:left sur l'enfant (#droite) va tuer la hauteur de la div parent (#wrapper). Donc, cette solution dépend de l'exigence . Mieux les laisser flotter sur un seul enfant.(#gauche dans votre cas)
InformationsquelleAutor Waleed

Voici ma réponse pour ceux qui sont Googler:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Voici le code HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

InformationsquelleAutor Malachi Bazar

Vous devez vous connecter pour publier un commentaire.