css如何让只两个盒子处于水平其他不变

你可以使用CSS的Flexbox布局来实现这个效果。具体步骤如下：

1. 在父元素上设置`display: flex;`，使其变为一个flex容器。
2. 将需要水平排列的两个子元素设置为`flex: 1;`，这样它们会平均占据父元素的宽度。
3. 将其他子元素设置为`flex: none;`，这样它们不会参与水平排列。

例如，HTML代码如下：

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

CSS代码如下：

.container {
  display: flex;
}

.box {
  flex: 1;
}

.other-box {
  flex: none;
}

这样，只有`.box`类的元素会水平排列，而`.other-box`类的元素会保持原来的位置不变。

相关问题

css三个盒子绑定一个动态class 点击第一个盒子其他两个盒子不变

可以使用JavaScript来实现这个功能。

首先，在HTML中给三个盒子设置一个共同的类名（例如：box）和一个唯一的id。

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>

然后，在CSS中定义一个动态class（例如：active），并给其设置样式。

.active {
  background-color: red;
}

最后，在JavaScript中绑定点击事件，当点击第一个盒子时，添加动态class，同时移除其他两个盒子的动态class。

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

box1.addEventListener('click', function() {
  box1.classList.add('active');
  box2.classList.remove('active');
  box3.classList.remove('active');
});

这样，当点击第一个盒子时，它会添加动态class（active）并变红，其他两个盒子不会发生变化。

css怎么样实现一个盒子的宽度缩小后另一个挨着的盒子的宽度变大撑满父盒子

你可以使用CSS中的flex布局来实现一个盒子的宽度缩小后另一个挨着的盒子的宽度变大撑满父盒子。具体做法是给这两个盒子的父元素设置display: flex属性，并设置flex属性和flex-shrink属性。例如：

HTML代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

CSS代码：

.container {
  display: flex;
}

.box1 {
  flex: 0 0 auto;
}

.box2 {
  flex: 1 1 auto;
}

在上述代码中，.container是这两个盒子的父元素，设置了display: flex属性，表示使用flex布局。.box1的flex属性值为0 0 auto，表示不可伸缩，不可缩小，宽度由内容撑开。.box2的flex属性值为1 1 auto，表示可伸缩，可缩小，宽度也由内容撑开。这样，当.box1的宽度缩小后，.box2的宽度会自动变大，撑满父盒子。

需要注意的是，如果.box1的宽度小于内容宽度，.box2也会跟着缩小。因此，如果想保持.box2的宽度不变，可以给.box2设置一个min-width属性，保证最小宽度不变。