0
votes

Comment ajouter du texte au bas de chaque flexbox

J'ai un conteneur flexbox avec 4 éléments flexibles. J'ai besoin d'une sortie comme l'image ci-dessous

J'ai fait la partie de codage mais je suis coincé avec l'ajout du texte sous la flexbox

Mon code:

.flex-container {
  margin: 40px auto 0 auto;
  margin-top: 0;
  display: flex;
  justify-content: center;
  background-color: white;
  
}

.flex-container > div {
  margin: 40px auto 0 auto;
  color: white;
  background-color:lightgray;
  width: 140px;
  margin: 20px;
  text-align: center;
  line-height: 140px;
  font-size: 20px;
  
}

<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

html css flexbox

1 commentaires

Où est le code html pour le texte en bas?

3 Réponses :

2
votes

Voilà comment je le ferais.

<div class="flex-container">
  <div class="container">
    <div class="box">1</div>
    <div class="text">BOX1</div>
  </div>
  <div class="container">
    <div class="box">2</div>
    <div class="text">BOX2</div>
  </div>
   <div class="container">
   <div class="box">3</div> 
     <div class="text">BOX3</div>
  </div>
   <div class="container">
   <div class="box">4</div>
     <div class="text">BOX4</div>
  </div>
  
</div>

.flex-container {
  margin: 40px auto 0 auto;
  margin-top: 0;
  display: flex;
  justify-content: center;
  background-color: white;
  
}

.box {
  margin: 40px auto 0 auto;
  color: white;
  background-color:lightgray;
  width: 140px;
  margin: 20px;
  text-align: center;
  line-height: 140px;
  font-size: 20px;
}

.text{
  text-align:center;
}

2 commentaires

Cher Paria, veuillez fournir au moins une explication simple sur votre solution. Bien que je vote pour votre réponse, veuillez consulter ce lien: stackoverflow.com/help/how-to-answer Bonne chance.

Merci beaucoup d'avoir voté. Je vais garder cela à l'esprit à partir de maintenant.

-1
votes

J'espère que cela fonctionne pour vous.

<div class="flex-container">
  <div>
    <div class='container'>1</div>
    <span>Box 1</span>
  </div>
  <div>
  <div class='container'>1</div>
    <span>Box 2</span>
  </div>
  <div>
    <div class='container'>1</div>
    <span>Box 3</span>
  </div>
  <div>
    <div class='container'>1</div>
    <span>Box 4</span>
  </div>
</div>

.flex-container {
  margin: 40px auto 0 auto;
  margin-top: 0;
  display: flex;
  justify-content: center;
  background-color: white;
  text-align: center;
}

.container {
  margin: 40px auto 0 auto;
  color: white;
  background-color:lightgray;
  width: 140px;
  margin: 20px;
  text-align: center;
  line-height: 140px;
  font-size: 20px;
  
}

0 commentaires

0
votes

Faites simplement ceci: (La façon la plus appropriée de le faire avec une table)

<div class="boxes">
      <div class="box">box 1</div>
      <div class="box">box 2</div>
      <div class="box">box 3</div>
      <div class="box">box 4</div>
</div>
<div class="text-box">
      <div class="textbox">text 1</div>
      <div class="textbox">text 2</div>
      <div class="textbox">text 3</div>
      <div class="textbox">text 4</div>
</div>

.box{
   background-color: #7c7cab;
   height: 80px;
   display: flex;
   margin: 10px;
   color: white;
}

.box,.textbox{
   width: 20%;
   float: left;
}

.textbox{
   color: black;
   margin-left: 10px;
   margin-right: 10px;
   text-align: center;
}

0 commentaires