Pomoc pri programovaní, odpovede na otázky / css / Nastavte medzery medzi stĺpcami, takže každý stĺpec má rovnakú veľkosť (pomocou nadácie) - css, zurb-foundation

Nastavte medzery medzi stĺpcami, takže každý stĺpec má rovnakú veľkosť (pomocou nadácie) - css, zurb-foundation

Snažím sa vytvoriť priestor medzi mojimi stĺpmi, ale nemôžem nájsť to správne riešenie.

kód:

<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>

Pokúsili sa nastaviť triedu ako okraj-pravý, ľavý okraj na stĺpcoch, ale potom bude ľavý a pravý stĺpec väčší ako dva v strede (ja používam stredný-3, takže majú 4 stĺpce).

obrázok:

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;
}

Je to možné, bez toho, aby to bolo globálne?

odpovede:

1 pre odpoveď č. 1

prosím, vyskúšajte to, dúfam, že to budete potrebovať.

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%;
}

vidieť Bootply Updeted Demo

0 pre odpoveď č. 2

Môžete skúsiť tento kód

<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>

Zmenil som iba časť HTML. môžete použiť rovnaké css

0 pre odpoveď č. 3