Comment diviser div en 5 parties égales en utilisant% width en CSS

Je veux diviser mon div "tile-container" avec la largeur de 100% en 5 parties égales. Je pensais que créer 5 divs à l'intérieur avec la largeur de 25% résoudrait le problème, mais ce n'était pas le cas. Le conteneur semble être trop petit. Voici mon code:Comment diviser div en 5 parties égales en utilisant% width en CSS

<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-10 col-md-offset-1"> 
       <div class="tile-container"> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div>   
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Et fichier stylsheet.css:

.tile-container{ 
    position: relative; 
    border: solid #BDBDBD 2px; 
    margin: 5px 0px; 
    width:100%; 
    } 

.tile{ 
    width: 20%; 
    min-height:22px; 
    border: 1px #BDBDBD solid; 
    display: inline-block; 
}

Source

2017-09-03 Mark

(1) Je suppose que vous voulez dire dans votre question 20% et 25% - vous avez 20% dans votre CSS. (2) Pourquoi ne les faites-vous pas en cols de largeur 2? Vous utilisez déjà un système de grille. (3) un extrait de travail aiderait à nous montrer le problème en action afin que nous puissions aider – FluffyKitten

Le problème est avec l'espacement dans le code HTML entre les divs, d'ignorer l'espacement vous pouvez ajouter à la font-size:0.tile-container, puis utiliser un font-size spécifique au .tile:

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
    font-size:0; /* add */ 
 
} 
 

 
.tile{ 
 
    font-size:20px; /* or whatever you want */ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-10 col-md-offset-1"> 
 
       <div class="tile-container"> 
 
        <div class="tile">A</div> 
 
        <div class="tile">B</div> 
 
        <div class="tile">C</div> 
 
        <div class="tile">D</div> 
 
        <div class="tile">E</div>   
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

Une autre méthode serait de commenter les espaces:

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
} 
 

 
.tile{ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-10 col-md-offset-1"> 
 
     <div class="tile-container"> 
 
      <div class="tile">A</div><!-- 
 
     --><div class="tile">B</div><!-- 
 
     --><div class="tile">C</div><!-- 
 
     --><div class="tile">D</div><!-- 
 
     --><div class="tile">E</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-09-03 19:41:15

Cela a fonctionné! Est-ce que font-size: 0px est un moyen universel de se débarrasser des espaces entre les divs? – Mark

Je suppose que le terme est cross-navigateur, et oui, il est. –

Comment diviser div en 5 parties égales en utilisant% width en CSS

Répondre

Questions connexes