Comment rendre la marge responsive de la même taille entre les boutons et sur les côtés?

Lorsque je diminue la taille de la fenêtre, la marge entre les boutons reste au même pourcentage, mais je veux diminuer la marge gauche du bouton1, autant le navigateur diminue la taille de la marge droite du bouton4. Le but serait donc de faire en sorte que les boutons soient positionnés à 900px et plus.Comment rendre la marge responsive de la même taille entre les boutons et sur les côtés?

code HTML:

<!DOCTYPE HTML> 
<html> 
<head> 

    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

</head> 

<body> 
<div class="container" 
    <div class="games"> 
      <article class="games-fluid-left" id="tic-tac-toe"> 
       <!--játékok képei--> 
       <p>poker</p> 
       <div class="gamebuttons-container"> 
        <p><a>button1</a></p> 
        <p><a>button2</a></p> 
        <p><a>button3</a></p> 
        <p><a>button4</a></p> 
       </div> 
      </article> 

      <article class="games-fluid-right" id="chess"> 
       <!--játékok képei--> 
       <p>fortuna</p> 
       <div class="gamebuttons-container"> 
        <p><a>button1</a></p> 
        <p><a>button2</a></p> 
        <p><a>button3</a></p> 
        <p><a>button4</a></p> 
       </div> 
      </div> 
      </article> 
</div> 

</body>

code CSS:

.container{ 
    max-width:1100px; 
    height:1500px; 
    margin:0px auto; 
    border:1px solid navy; 
} 

.games { 
    max-width:calc(100% - 169px); 
    height: 700px; 
    position:relative; 
    border:1px solid black; 
} 

.games-fluid-left { 
    display:inline-block; 
    width:calc(46.75% - 30px); 
    height: 270px; 
    border: 1px solid black; 
    border-radius: 5px; 
    position:relative; 
    float:left; 
    margin-left:4.3%; 
    margin-top:35.5px; 
} 

.games-fluid-right { 
    display:inline-block; 
    width:calc(46.75% - 30px); 
    height: 270px; 
    border: 1px solid black; 
    border-radius: 5px; 
    position:relative; 
    float:left; 
    margin-left:35.5px; 
    margin-top:35.5px; 
} 

.games-fluid-right p , .games-fluid-left p{ 
    text-align: center; 
    font-size: 20px; 
    color:black; 
} 

.gamebuttons-container{ 
    position:relative; 
    height:50px; 
    max-width:100%; 
    margin:175px auto; 
    border:1px solid red; 
} 

.gamebuttons-container a { 
    float:left; 
    padding: 8px; 
    margin-left:7%; 
    font-size:14px; 
    border: 1px solid black; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius:5px; 
    width:60px; 
    background-color:black; 
    color:white; 
}

Source

2017-02-09 Looz

Je ne comprends pas vraiment ce que vous voulez exactement, mais flexbox pourrait être votre solution.

https://jsfiddle.net/PaulvdDool/ttpfryq6/

I ajouté flex-box: flex; au conteneur du bouton. Cela les mettra dans une ligne. Puis j'ai ajouté justify-content: space-around;. Cela fait que tous les éléments enfants (les boutons) se positionnent uniformément dans l'espace disponible.
J'ai également dû supprimer toute marge que vous avez mis sur les boutons.

Source

2017-02-09 22:41:55

fonctionne bien, flex a un problème de compatibilité IE9,10 http://caniuse.com/#feat=flexbox –

C'est ce que je voulais, merci beaucoup, vous avez beaucoup aidé. – Looz

Comment rendre la marge responsive de la même taille entre les boutons et sur les côtés?

Répondre

Questions connexes