html点击button隐藏div右半边

你可以使用CSS的flexbox布局来实现这个效果。你需要将你的页面分为两个div，一个是左侧的div，一个是右侧的div。然后将它们放在一个父元素内，并使用flexbox布局将它们分为两个列。

当点击按钮时，你可以使用JavaScript来添加或删除一个类来隐藏或显示右侧的div。这个类可以在CSS中定义。

下面是一个示例代码：

HTML：

<div class="container">
  <div class="left-column">
    <!-- 左侧内容 -->
  </div>
  <div class="right-column">
    <!-- 右侧内容 -->
  </div>
  <button id="hide-button">隐藏右侧</button>
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
}

.left-column {
  width: 50%;
}

.right-column {
  width: 50%;
}

.hide {
  display: none;
}

JavaScript：

const hideButton = document.getElementById('hide-button');
const rightColumn = document.querySelector('.right-column');

hideButton.addEventListener('click', () => {
  rightColumn.classList.toggle('hide');
});