在列之间设置空间，因此每列的大小相同（使用基础）

Question

我试图在我的专栏之间留出一些空间，但似乎找不到合适的解决方案。

代码：

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

尝试在列上将类设置为border-right，border-left，但是，左列和右列的大小将比中间的两列大（我使用middle-3，所以有4列）。

图片：

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

这可能，而不是全局应用吗？

Answer 1

请你试试这个，我希望你需要这个。

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

请参阅Bootply Updeted Demo

Answer 2

可以试试这段代码

auto test=100. *3.f;

我只修改了HTML部分。你可以使用相同的CSS

Answer 3

80 more Caused by: java.sql.SQLSyntaxErrorException: Table 'MARK7.transactionsmain' doesn't exist at 

.row {

.row {
display:flex;
justify-content:space-between;
}

请务必使用http://autoprefixer.github.io/

Answer 4

试试这个......

在一个包括你的头部这个链接。 这个链接是zurb foundation css。 https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css