Question

我有一个页面，我只能修改CSS。我尝试实现2列布局，并从网格布局中排除一个元素。这是html和我的CSS的示例：

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

.container:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

如何排除hr元素？

Answer 1

您需要选择“所有直接子元素”，如下所示：

（添加了边框，以便您可以看到div布局）

.container > *:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

Answer 2

为小时使用“位置：绝对”

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}

hr {
  position: absolute;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

用：not排除元素，不在网格布局中

2 个答案: