0
votes

Comment puis-je créer ceci (table) avec CSS

Je veux créer ce design avec CSS. Le texte / la zone rouge (responsive) doit être réactif / flexible sur des écrans plus petits.

Le design que je souhaite créer avec CSS:

Je peux le faire simplement avec un tableau html, mais les tableaux ne doivent pas être utilisés dans la conception.

J'ai examiné les éléments non ordonnés lister et masquer les puces et les remplacer par des images mais avoir des problèmes avec la spécification entre le contenu et la zone de réponse.

Voici un code mais je ne peux pas le faire fonctionner lorsque j'ajoute du texte à droite de Facebook et bouton twitter.

<div id="fact-footer">
<img id="img-fb" src="img/fb.svg" alt="Facebook">
<img id="img-fb" src="img/tw.svg" alt="Facebook">
<a id="more-facts" href="#">NÃ„STA ></a>
</div>


#fact-footer {
bottom: 0;
font-size: 12px;
}

#img-fb, #img-twitter {
float: left;    
width: 35px;
height: 35px;
}

#img-fb {
margin-right: 10px;
}

#more-facts {
float: right;
font-size: 14px;
padding: 8px;
border: none;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
cursor: pointer;
background-color: #26a69a;
color: white;
}

Le code ci-dessus donne ceci

p >

html css responsive-design

8 commentaires

utilisez-vous le framework bootstrap? si oui, cela peut être facilement réalisé en utilisant les grilles dans bootstrap ..

Alors, où est votre code?

Je n'utilise aucun framework

@caramba J'ai ajouté du code qui fonctionne bien sans le texte à côté de Facebook et Twitter. Je reçois un désordre lorsque j'ajoute le texte.

noti.st/rachelandrew/QEhSSc

developer.mozilla.org/en-US/docs/Learn/ CSS / CSS_layout / Flexbo‌ x

developer.mozilla.org/en-US/docs/Learn/ CSS / CSS_layout / Grilles

Oui, maintenant je vois. Vous devrez envelopper. Et si le texte à côté de Facebook n'est pas dans l'image, vous devrez l'écrire à l'intérieur du wrap. (J'espère que le texte n'est pas l'image) alors avec les liens quentins ci-dessus, vous devriez pouvoir le créer. Bonne chance

3 Réponses :

-1
votes

utilisez bootstrap https://getbootstrap.com/

vous pouvez utiliser 1 ligne avec quatre colonnes

<div class="row">

<div class="col-sm-3"> facebook image here </div>
    <div class="col-sm-3"> twiter image here </div>
    <div class="col-sm-3"> text </div>
    <div class="col-sm-3"> nasta image here </div>
</div>

1 commentaires

Un Bootstrap complet n'est pas requis. Téléchargez Bootstrap et regardez dans le fichier bootstrap-grid.css . Tout le travail que vous demandez a été fait. C'est pur css, juste copier / coller, c'est tout.

0
votes

Vous attendez-vous à ceci:

<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>

<ul class="flex-container">
  <li class="flex-item">
      <i style="color:blue"  class="fa fa-facebook fa-3x"></i>     
  </li>
    <li class="flex-item" >
      <span > facebook <br/> Account  </span>    
  </li>
  <li class="flex-item"><i style="color:lightblue" class="fa fa-twitter fa-3x"></i> </li>    
  <li class="flex-item"> <span>Twitter <br/> Account </span>  </li>
  <li class="flex-item">(responsive)</li>
  <li class="flex-item">
    <button class="btn">NASTA ></button>

  </li>
</ul>

body{
  margin:10px;
}

.flex-container {
  padding: 0;
  margin: 0;
    list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;    
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}
span{
  color:black;
}
.flex-item:nth-of-type(5) { flex-grow: 1; }

.flex-item {  
  background: #e0e0e0;
  color: white;
  padding:6px;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

.btn{
   background-color: #5fda64; /* Green */
  border: none;
  color: white;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius:5px;
  cursor: pointer;
  
}

0 commentaires

0
votes

En utilisant flex, vous pouvez utiliser ce

<div class="row">
  <div class="col-sm-3"> facebook image here </div>
  <div class="col-sm-3"> twiter image here </div>
  <div class="col-sm-3"> text </div>
  <div class="col-sm-3"> nasta image here </div>
</div>

.row {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.col-sm-3 {
  width: 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  box-sizing: border-box;
}

Donnez une bordure au .col-sm-3 et voyez ce qui se passe (et vous utilisez Bootstap sans utiliser le package complet).

0 commentaires