css四个元素当元素宽度小于25%时四列，宽度小于50%时二列

在CSS中，你可以利用百分比和媒体查询（Media Queries）来实现这种基于宽度的动态列数变化。下面是一个示例，假设我们有四个元素，它们的排列规则是这样的：

- 当元素宽度小于25%时，显示成四列；
- 当元素宽度达到25%，但小于50%时，变为两列。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); /* 初始四列，每个列至少25%，最多1fr */
  gap: 10px; /* 格子间的间距 */
}

/* 当屏幕宽度减少到一定程度时，切换到两列 */
@media (max-width: 48rem) { /* 48rem大约等于720px，可以自行调整 */
  .container {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); /* 变为两列，每个列至少50% */
  }
}

在这个例子中，`.container`使用了网格布局，并设置了初始列宽为25%，如果宽度不足以放下四个25%宽度的元素，会自动缩小列宽直到充满。媒体查询里的条件是当屏幕宽度小于或等于48rem时，会切换到每列至少50%的模式。

相关问题

css四个元素四列，二列，一列自适应排列

在CSS中，你可以使用一些弹性布局（Flexbox）或者网格布局（Grid）来实现元素的自适应四列、两列和一列排列。这里分别给出两种方法：

**1. 使用Flexbox：**

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

.item {
  flex: 1 0 33.3%; /* 初始宽度1/4，撑满可用空间 */
}

/* 当屏幕变窄时，自动调整为两列 */
@media (max-width: 600px) {
  .item {
    flex: 1 0 50%; /* 切换到1/2的宽度 */
  }
}

/* 当屏幕更窄时，自动调整为一列 */
@media (max-width: 300px) {
  .item {
    flex: 1; /* 占据所有剩余空间，无固定宽度 */
  }
}

**2. 使用CSS Grid：**

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 初始四列等宽 */
  gap: 10px; /* 列间间距 */
}

/* 当屏幕小于600px时，转换为两列 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当屏幕小于300px时，转换为一列 */
@media (max-width: 300px) {
  .container {
    grid-template-columns: 1fr; /* 单列模式 */
  }
}

以上代码中，`.container`是容器，`.item`是需要排列的元素。通过媒体查询（Media Queries），可以根据设备视口的宽度调整布局。

写一个布局，分为左右，中间有宽为30像素的间隔，左盒子有ul元素，ul里面有10个li元素，屏幕最大的时候排四个，屏幕宽度小于1200px,li元素一排排三个

以下是一个简单的布局示例，满足你的要求：

HTML 代码：

<div class="container">
  <div class="left">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS 代码：

.container {
  display: flex;
  align-items: stretch;
  height: 500px;
}

.left {
  flex: 1;
}

.middle {
  width: 30px;
  background-color: #ccc;
}

.right {
  flex: 1;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

li {
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  li {
    width: calc(33.33% - 10px);
  }
}

上述代码中，使用了 Flex 布局来实现左右两个盒子的等分排布。通过设置 `flex: 1` 属性，左右盒子的宽度会自适应屏幕大小。

中间的间隔使用了一个宽度为 30px 的 `div` 元素，并设置了背景色为灰色。

`ul` 元素中的 `li` 元素使用了 Flex 布局，通过设置 `flex-wrap: wrap` 属性，当屏幕宽度不够时，`li` 元素会自动换行。同时，根据设备屏幕大小，设置了不同的宽度和间距，从而实现了自适应布局。

在屏幕最大的情况下，`li` 元素一行排 4 个，在屏幕宽度小于 1200px 时，`li` 元素一行排 3 个。