时间戳

首页 > 解决方案 > 在css中设置主要内容相对于响应式侧边栏宽度的边距

javascript - 在css中设置主要内容相对于响应式侧边栏宽度的边距

问题描述

我有一个 html 网页，其中包含一个响应式侧边栏（悬停时侧边栏的宽度会发生变化）。我希望主要内容相对于侧边栏的宽度有一个边距。请帮助我如何使用 css> 实现这一点例如：

在将鼠标悬停在侧边栏上之前：

在此处输入图像描述

将鼠标悬停在侧边栏上后： 在此处输入图像描述

标签： javascripthtmljquerycss

解决方案

通过您的照片示例，我猜您的意思是宽度而不是边距，并且您只想确保 div 不重叠。

您可以使用 flexbox，以便 .content 元素在 .sidebar 宽度发生变化时采用剩余的宽度。然后，您可以设置 .sidebar 的起始宽度，然后在悬停时更改宽度。

这是一个例子：

/* For style */
.sidebar span,
.content span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: sans-serif;
}
.sidebar {
  background: #4C559F;
  cursor: pointer;
}
.content {
  background: #4F9DD4;
}
.sidebar,
.content {
  position: relative;
  transition: width 0.1s;
}

/* Important */
.container {
  height: 200px;
  display: flex;
  flex-direction: row;
}

.sidebar {
  width: 20%;
  margin-right: 10px; /* Your set margin */
}
.sidebar:hover {
  width: 40%;
}
.content {
  flex-grow: 1;
}
<div class="container">

  <div class="sidebar"><span>sidebar</span></div>
  <div class="content"><span>content</span></div>
  
</div>

但是，如果您想使用边距移动内容元素。. . 当您将鼠标悬停在侧边栏时，您必须使用 javascript 向容器或正文元素添加一个类。. . 然后将容器的边距设置为所需的大小。. . orrr 使用 javascript 动态计算它。

希望这可以帮助。上帝保佑！

推荐阅读