HTML/CSS 实现多个并列div右上角关闭按钮

多个并列div右上角有个关闭按钮的HTML/CSS怎么写

您可以使用一下HTML/CSS代码来实现多个并列的div右上角有个关闭按钮：

HTML代码

<div class='container'>
  <div class='box'>
    <button class='close-btn'>&times;</button>
    <h2>Box 1</h2>
    <p>Content of box 1</p>
  </div>
  <div class='box'>
    <button class='close-btn'>&times;</button>
    <h2>Box 2</h2>
    <p>Content of box 2</p>
  </div>
  <div class='box'>
    <button class='close-btn'>&times;</button>
    <h2>Box 3</h2>
    <p>Content of box 3</p>
  </div>
</div>

CSS代码

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  position: relative;
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

在这个例子中，我们使用了flexbox布局，通过设置.container的display为flex来让其子元素按照一定的规则排列。我们也为.box设置了position: relative属性来让其内部的关闭按钮使用position: absolute属性相对于.box定位。关闭按钮使用了×来表示，这是HTML实体字符的一种，表示一个叉号。

您可以根据需要修改.container和.box的样式来控制这些box的排列方式和外观。

希望这可以帮助到您！