La méthode que j’ai trouvée la plus sûre est celle qui utilise du javascript.
Soit plusieurs divisions flottantes (float:left;width:100px;) dont le nombre peut varier, une fois les divisions chargées, il suffit de déclencher le code javascript qui suit.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih8ulzDICbgIXQ97D0X5P_kMNXQUvM8yQZoYjkyOaYE75aqx_5xINuYeoUJeCQgIEqL6dpvjbDpvhI97S-YE5gszSxOEuzuDrGIv2HCggaeHzVevcVrdFc3r8u3NWU02s-94ANttcjaRrV/s320/Capture+d%25E2%2580%2599e%25CC%2581cran+2018-12-27+a%25CC%2580+18.35.06.png)
Le code javascript calcule la largeur du conteneur divcentre dont les propriétés sont : position:relative;margin-left:auto;margin-right:auto; pour être au centre de l’écran :
function redim() { document.getElementById(« divcentre »).style.width = (Math.trunc((window.innerWidth) / 100) * 100) + « px »;
}
Ce code devra s’exécuter après le chargement de la page :
<body onload= »redim(); »>
Il faudra aussi l’exécuter quand la fenêtre est redimensionnée :
window.onresize = function() {document.getElementById(« divcentre »).style.width = (Math.trunc((window.innerWidth) / 100) * 100) + « px »;};
Voici le code entier :
<html>
<head>
<script type= »text/javascript »>
window.onresize = function() {document.getElementById(« divcentre »).style.width = (Math.trunc((window.innerWidth) / 100) * 100) + « px »;};
function redim() { document.getElementById(« divcentre »).style.width = (Math.trunc((window.innerWidth) / 100) * 100) + « px »;
}
</script>
</head>
<body onload= »redim(); »>
<div id= »divcentre » style= »position:relative;margin-left:auto;margin-right:auto; »>
<div id= »div1″ style= »float:left; width:100px »>
<div id= »div2″ style= »float:left; width:100px »>
<div id= »div3″ style= »float:left; width:100px »>
</div>
</body>
</html>
Laisser un commentaire