帮我写一段css div块级元素先横着排再竖着排的样式

可以使用 CSS3 的 flexbox 布局来实现，具体的样式代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
}

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

在 HTML 中，只需要将元素放在一个容器中，设置容器的 `display` 属性为 `flex`，并设置 `flex-wrap` 属性为 `wrap`，就可以让元素自动换行。每个子元素的宽度、高度和间距可以根据需要进行调整，上面的代码中，每个子元素的宽度和高度都是 100px，外边距为 10px。

示例代码中的效果是，当容器的宽度足够大时，子元素会横向排列；当容器的宽度不够大时，子元素会自动换行，竖向排列。

相关问题

css中 块级元素与行元素的相互转换

CSS中可以通过设置`display`属性来实现块级元素和行内元素的相互转换。

1. 块级元素转换为行内元素：

将块级元素设置为`display: inline`或`display: inline-block`即可将其转换为行内元素。例如：

div {
    display: inline; /* 将 div 转换为行内元素 */
}

2. 行内元素转换为块级元素：

将行内元素设置为`display: block`即可将其转换为块级元素。例如：

span {
    display: block; /* 将 span 转换为块级元素 */
}

3. 块级元素转换为块级表格元素：

将块级元素设置为`display: table`即可将其转换为块级表格元素。例如：

div {
    display: table; /* 将 div 转换为块级表格元素 */
}

4. 块级元素转换为表格单元格元素：

将块级元素设置为`display: table-cell`即可将其转换为表格单元格元素。例如：

div {
    display: table-cell; /* 将 div 转换为表格单元格元素 */
}

需要注意的是，相互转换后元素的默认样式也会相应地改变，例如块级元素转换为行内元素后，它的高度、宽度等属性可能失效，因为行内元素不会独占一行。因此在转换时需要根据具体情况进行调整。

css行内快转换块级元素

你可以使用 CSS 的 display 属性将行内元素转换为块级元素。将 display 属性设置为 "block" 可以将行内元素转换为块级元素，如下所示：

span {
  display: block;
}

如果你想将块级元素转换为行内元素，你可以将 display 属性设置为 "inline"，如下所示：

div {
  display: inline;
}