在css中设置主要内容相对于响应侧边栏宽度的边距[重复]

Posted 2023-03-05

【中文标题】在css中设置主要内容相对于响应侧边栏宽度的边距[重复]

【英文标题】：Set the margin of the main content relative to width of responsive sidebar in css [duplicate]

【发布时间】：2021-12-11 12:19:02

【问题描述】：

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

悬停在侧边栏上之前：

将鼠标悬停在侧边栏上后：

【问题讨论】：

这能回答你的问题吗？ How to set the margin or padding as percentage of height of parent container?

它不是高度..我想要它基于宽度

那篇文章涵盖了相对于其父尺寸的宽度和高度。特别是***.com/a/53618089/4218046.

【参考方案1】：

通过您的照片示例，我猜您的意思是宽度而不是边距，您只是想确保 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 动态计算它。

希望这会有所帮助。上帝保佑！