1
J'ai un élément de bloc avec deux enfants, et je les aime chacun occuper la moitié de l'espace, moins un écart de taille fixe entre eux. Cela devrait être facile avec calc():Pixels supplémentaires lors de la division d'espace entre deux éléments
var left = document.getElementById("left");
var right = document.getElementById("right");
var info = document.getElementById("info");
var offset = 5;
function toggleStyle() {
if (offset === 5) {
offset = 7;
} else {
offset = 5;
}
info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);";
}
toggleStyle();#container {
width: 300px;
height: 160px;
background-color: green;
}
#left, #right {
display: inline-block;
background-color: blue;
height: 150px;
margin-top: 5px;
margin-bottom: 5px;
}
#left {
margin-right: 5px;
}
#right {
margin-left: 5px;
}<div id="info"></div>
<button onclick="toggleStyle()">Toggle</button>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>Dans l'extrait ci-dessus, j'ai un parent 300px avec des enfants qui devrait être 50% - 5px = 145px de large, plus une marge de 5px chacun. Cela signifie que les deux enfants, plus leurs marges, devraient occuper exactement 300px. Quand je l'ai mis en place de cette façon, ils enveloppent. Si je soustrais 2 pixels de plus par enfant, ils semblent remplir exactement l'espace, même s'ils ne mesurent que 148 pixels chacun (marge comprise). D'où viennent les pixels supplémentaires?
:: soupirer :: L'homme, quelques jours, je déteste vraiment HTML. – Coderer
@Coderer C'est souvent la plus simple des choses qui causent les pires problèmes! :) Pour référence future, cela se produit avec l'affichage "inline-block", mais vous pouvez supprimer l'espace blanc manuellement ou les commentaires HTML fonctionnent aussi. par exemple. '
' – FluffyKitten