Aide à la programmation, réponses aux questions / Css / Définit un espace entre les colonnes, de sorte que chaque colonne ait la même taille (en utilisant la fondation) - css, zurb-foundation

Définissez un espace entre les colonnes, de sorte que chaque colonne ait la même taille (en utilisant la fondation) - css, zurb-foundation

J'essaie de faire de la place entre mes colonnes, mais je ne peux pas trouver la bonne solution.

Code:

<div class="content wrapper">
<div class="row">
<div class="red window border-right column small-12 medium-3">
Section 1
</div>
<div class="green window border-left border-right column small-12 medium-3">
Section 2
</div>
<div class="blue window border border-left border-right column small-12 medium-3">
Section 3
</div>
<div class="yellow window border-left column small-12 medium-3">
Section 4
</div>
</div>
</div>

Vous avez essayé de définir des classes comme border-right, border-left sur les colonnes, mais ensuite, les colonnes left et right seront plus grandes que les deux autres (je m utilise le middle-3, donc 4 colonnes).

Image:

Css:

.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}

Est-ce possible, sans l'appliquer globalement?

Réponses:

1 pour la réponse № 1

S'il vous plaît, vous pouvez essayer ceci, j'espère que vous en avez besoin.

CSS:

.content.wrapper {
float: left;
width: 100%;
}
.row {
float: left;
margin: 0;
width: 100%;
}
.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}
.border-right, .border-left {
float: left;
width: 25%;
}

Voir Démonstration mise à jour par bootply

0 pour la réponse № 2

Pourrait s'il vous plaît essayer ce code

<div class="content wrapper">
<div class="row" data-equalizer="">
<div class="column small-12 medium-3">
<div class="red window border-right" data-equalizer-watch="">Section 1</div>
</div>
<div class="border-right column small-12 medium-3">
<div class="green window border-left" data-equalizer-watch="">Section 2</div>
</div>
<div class="border-left border-right column small-12 medium-3">
<div class="blue window border" data-equalizer-watch="">Section 3</div>
</div>
<div class="column small-12 medium-3">
<div class="yellow window border-left" data-equalizer-watch="">Section 4</div>
</div>
</div>
</div>

Je n'ai modifié que la partie HTML. vous pouvez utiliser le même css

0 pour la réponse № 3