Question

我想有三个单独的垂直列，有没有办法可以更改我的代码，使列垂直而不是水平（就像现在一样）。

git pull --rebase origin master

.cols {
  font-weight: bold;
  min-height: 50%;
  min-width: 90%;
  background: #000000;
  margin-bottom: 15px;
  display: table;
  table-layout: fixed;
}
.cols div {
  position: relative;
  background: #232323;
}
.col {
  display: table-cell;
}

目前我有三个水平盒子伸展在一个外部容器上，我希望这三个盒子在垂直列中均匀设置，如果这是有道理的。

Answer 1

如果我理解你的意思，可以使用flex：

来完成

.cols {
  min-height: 50%;
  min-width: 90%;
  background: #000000;
  margin-bottom: 15px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.cols div {
  background: #232323;
  color: #fff;
}

<div class="cols">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

是否可以垂直对齐我的div元素？

1 个答案: