两个盒子竖直排列的css怎么写

你可以使用CSS中的“display”属性和“flex”值来实现两个盒子的竖直排列。具体代码如下：

.container {
  display: flex;
  flex-direction: column;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

HTML代码应该类似于这样：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

这个代码将会把两个盒子垂直排列，中间有10像素的间隔。

相关问题

盒子内的li元素竖直排列

如果你想要在一个无序列表（ul）内，让每个列表项（li）元素竖直排列，通常情况下，你需要创建一个包含所有li元素的块级容器，并将其CSS样式设置为适合垂直排列的内容。这里是一个简单的例子，使用CSS的`display: flex`或`grid`来实现：

**使用Flexbox：**

ul {
  display: flex;
  flex-direction: column; /* 将默认的水平方向改为垂直 */
  list-style-type: none; /* 隐藏项目符号 */
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1; /* 自动填充剩余空间 */
  min-height: 48px; /* 设置最小高度，可根据实际需求调整 */
  background-color: #f1f1f1; /* 仅做示例，可以根据需要添加背景 */
}

**使用CSS Grid：**

ul {
  display: grid;
  grid-template-columns: auto; /* 使用自动布局，每一行填满 */
  gap: 1em; /* 列间距 */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #f1f1f1;
}

在这两个示例中，`li`元素都会按照垂直顺序排列。

两个同级的弹性盒子 实现表格布局

可以使用flex布局来实现表格布局，具体实现方法如下：

HTML结构：

<div class="table">
  <div class="row header">
    <div class="cell">表头1</div>
    <div class="cell">表头2</div>
    <div class="cell">表头3</div>
  </div>
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
    <div class="cell">内容3</div>
  </div>
  <div class="row">
    <div class="cell">内容4</div>
    <div class="cell">内容5</div>
    <div class="cell">内容6</div>
  </div>
</div>

CSS样式：

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}

.row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
}

.header {
  font-weight: bold;
  background-color: #f0f0f0;
}

.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

解释：

首先用一个大的容器来包含整个表格，设置为flex布局，并且flex-direction为column，这样子元素就会竖直排列。

每一行使用一个div容器来包含，也设置为flex布局，但是flex-direction为row，这样子元素就会水平排列。

表头使用一个特殊的类名.header来标识，以便于增加样式。

单元格使用一个div容器来包含，设置为flex: 1，表示等分剩余空间，padding: 10px，增加内边距，border: 1px solid #ccc，增加边框。

这样子就可以实现简单的表格布局了，通过调整样式可以实现更多的效果。