时间戳

首页 > 解决方案 > 如何使html正文中的div远离其他两个div

html - 如何使html正文中的div远离其他两个div

问题描述

我想知道如何在 html 正文中设置一个 div，无论 html 正文的宽度如何，都可以使用某些值。如下图所示：图片

每侧有两个侧边栏。我想在它们之间创建一个 div，考虑到侧边栏 1 的距离是 50px ，另一个是 20px 。如果 html 正文的宽度总是在变化，我想保持这个距离。

在其他意义上.. 我想让这个中间 div 始终远离其他两个侧边栏，例如，如果 body 宽度为 1000px，那么中间 div 的宽度增加以匹配 50/20px 距离，如果body 的宽度变为 500px，div 宽度减小以尊重 50/20px

更新 1

在我尝试了 Roberto Zvjerković 先生提供的解决方案之后

对于父 div，我应用了以下内容：

.Existed-ne-data-div-main {
  position: absolute;
  display: flex;
  background-color: #0069D9;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  align-items: center;
}

中间 div ：

.Existed-ne-data-div {
  position: absolute;
  display: block;
  width: 100%;
  height: 60px;
  background-color: rgb(220, 228, 220);
  min-width: 150px;
  box-shadow: 0px 0px 9px rgb(2,3,3);
  border-radius: 5px;
  margin-left: 140px;
  margin-right: 180px;

  }

结果 ：

图片

所以从左侧它可以工作，但右侧不是。

UPDATE2

在孩子中删除位置后。解决方案有效。

标签： html

解决方案

你可以为 div: 边距: 0 20px 0 50px; 或边栏的边距。请提供完整的html代码。

推荐阅读