css 我必须模仿一个文件资源管理器的功能，在它我希望子元素占据整个元素的宽度

jjhzyzn0 于 12个月前发布在其他

关注(0)|答案(1)|浏览(92)

我需要模仿一个文件浏览器在网络上，我需要的元素内的div改变整个容器的背景颜色时，像这样悬停

的数据
但我似乎只能设法得到这个

的
html看起来像这样

<div className="folder" onClick={() => handleTogglerotation("folder")}>
                <!-- some svg goes here -->
                <p className="subtitle">folder1</p>
            </div>
            <div className="folder-content">
                <div className="line"></div>
                <div className="file-section">
                    <div className="file-container">
                        <!-- some svg goes here -->
                        </svg>
                        <p>file1.md</p>
                    </div>
                    <div className="file-container">
                        <!-- some svg goes here -->
                        <p>file2.md</p>
                    </div>
                </div>

            </div>

字符串
我知道这和元素本身的大小有关，但是有没有办法达到前面提到的那个呢？
我已经尝试

通过z索引将文件容器放置在线上，然后尝试让它占据父文件的整个宽度
通过calc（）向文件容器添加宽度，但似乎效果不太好

实现这样的目标的最佳途径是什么？

css

来源：https://stackoverflow.com/questions/77707209/i-have-to-mimic-the-functionality-of-a-file-explorer-and-in-it-i-want-the-sub-el

1条答案

按热度按时间

ru9i0ody1#

如果不提供CSS，或者不知道div的大小，就很难做出假设，而且很可能无法解决问题。
不过，我会试着对你的情况做些假设：

假设1您的问题与您不知道如何使file-section div覆盖line div的事实有关，在这种情况下，很简单，只需使线1绝对定位：

.overall-container {
  background-color: black;
  padding-top: 10px;
  padding-bottom: 10px;
}

p {
  margin: 5px 0 0 0;
  color: white;
}

.folder {
  margin-left: 30px;
}
.folder-content {
  position: relative;
  //this is necessary so that the height of the line div takes this divs height into consideration and not the one of the body element
}

.line {
  position: absolute;
  margin-left: 30px;
  width: 0;
  height: 100%;
  border-left: 1px solid white;
}

.file-section {
  width: 100%;
}
.file-container {
  width: 100%;
}
.file-container:hover {
  background-color: #313131;
  cursor: pointer;
}
.file-container p {
  margin-left: 40px;
}

个字符

假设2您的问题与您被限制在一个已经很小的div中的事实有关，在这种情况下，如果您知道您所限制的div与屏幕左侧之间的距离，您可以将file-containers的边距设置为该精确值，但为负数，并且其宽度为width: calc(100% + value)。

如果是这种情况，请告诉我，你想要一个更好的解释，或者如果这是一个完全不同的情况。P.S.在未来，请添加所有相关的代码，包括相关的CSS，最好像我刚才做的代码片段

赞(0）回复(0）举报 12个月前

我来回答

css 我必须模仿一个文件资源管理器的功能，在它我希望子元素占据整个元素的宽度

1条答案

相关问题

热门标签

最新问答