个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
如果这是一个骗局，那么抱歉，但我没能找到它。
我有一个绝对定位的元素，其大小当前基于其内容:当前情况下的要求。但是，它也直接设置在其父项的右侧，而它需要在正下方。为了将绝对元素设置在其父元素下方，我设置了它的 left 和 top 并使父元素相对定位。但是，当我这样做时，绝对元素采用其父元素的宽度(非常小)。我真的需要绝对元素根据其(通常是动态的)内容定义自己的宽度。
有没有一种有效的方法可以将绝对元素设置在其父元素的正下方，同时使其开放以根据其内容调整大小？
编辑:
Here's用于演示该问题的 jsfiddle 链接。
这是 html:
<div id='menu'>
<span class='menuItem'>
<span class='menuItemTitle'>
Item 1
</span>
<div class='menuItemContent'>
test1 test1 test1 test1<br/>
testing testing, one two three<br/>
Anyone there?
</div>
</span>
<span class='menuItem'>
<span class='menuItemTitle'>
Item 2: extra wide
</span>
<div class='menuItemContent'>
test2 test2 test2 test2
</div>
</span>
</div>
这是 CSS:
#menu
{
background-color: blue;
width: 100%;
}
.menuItem
{
padding: 0 1em;
//position: relative;
}
.menuItemTitle
{
background-color: yellow;
}
.menuItemContent
{
background-color: green;
display: none;
position: absolute;
z-index: 100;
}
.menuItem:hover .menuItemContent
{
display: inherit;
}
默认情况下，它显示没有相对父元素的绝对元素。这允许元素的内容定义其宽度。如果您转到“.menuItem”样式并取消注释它的位置，那么绝对元素会被压扁。
最佳答案
除非您设置其两侧(例如“左”和“右”)或显式设置其宽度，否则默认情况下绝对定位元素的大小是内容大小。
因此，如果您的绝对定位元素的大小相对于父元素，则您必须执行上述操作之一。一个好的测试方法是使用检查员，例如Firefox 或 Chrome，查看计算的 CSS，并查看它是否包含上述内容之一。您还可以通过设置 right: auto; 来强制阻止这些情况。和 width: auto;在元素上。
一个小陷阱是它仍然会从其父级继承断行规则。为防止这种情况，只需将其宽度设置为一个非常大的数字，例如 1000000px。这将防止换行，但也会使其内部任何相对大小的元素都过大。然而，后者不是技术问题:相对大小的元素必须相对于某物来调整大小，因此您要么将其保留为相对于父对象，要么避免在直接子对象中使用相对大小绝对定位元素。
如果您需要内容大小的边框，只需将另一个 div 放入您的绝对定位元素中，使其成为绝对定位或 float ，然后为其添加边框。
如果您想混合相对大小的元素和不相对大小的元素，允许您的绝对定位元素相对于父元素调整大小，但同时，包装不应包装的单个元素/段落具有极宽的 div。
如果您希望绝对定位元素相对于父元素的父元素调整大小，则根本不要使其绝对定位。相反，使用 float ，并使其成为父对象的父对象的直接子对象。例如，这是我曾经用来制作内容大小侧边栏的技巧:
<div id="parent" style="float: left; width: 100%; clear:both"><!-- Float parent -->
<div id="sidebar" style="float: left">
Dynamic content
</div>
<div id="main_content_position" style="float: left"><!-- Extra div to set the position right of the sidebar -->
<div id="main_content" style="width: 100%"><!-- Inner div with 100% width forces the position div to grow as large as it can, minus the size of the sidebar -->
My content
</div>
</div>
</div>
<div id="clear_after" style="clear:both"></div><!-- Clear after the floating parent. We don't want it to actually float -->
请注意，此方法远非完美。它需要使用严格模式 ( <!DOCTYPE html> )，如果你使用 RTL，你将需要在 Firefox 上至少一个额外的 div，并与 overflow:visible 混为一谈。和 overflow:hidden , 否则自动换行会被破坏。
一般来说，让你的侧边栏有一个静态宽度是个好主意，然后使用旧的 float 和边距技巧:
<div id="parent" style="width: 100%">
<div id="sidebar" style="float: left; width: 150px">
Static content
</div>
<div id="main_content" style="margin-left: 150px">
Dynamic content
</div>
</div>
更新:它在 JSFiddle 中被“压缩”的原因是因为本例中的“内容大小”是基于最大的词。显然，您想要的是根本不引入换行符。
(此外，您将一个 div 放在一个不完全有效的范围内，但我会让它通过)
一个部分有效的解决方案是增加 div 的宽度并使用内部 div，正如我之前提到的:
<div class='menuItemContent'>
<div class='menuItemContentInner'>
test1 test1 test1 test1<br/>
testing testing, one two three<br/>
Anyone there?
</div>
</div>
并添加 CSS:
.menuItemContent
{
display: none;
position: absolute;
left: 0;
top: 1em;
z-index: 100;
width: 10000px;
}
.menuItemContentInner
{
background-color: green;
float: left;
}
此解决方案的缺陷在于，当您将鼠标悬停在元素上时，它会创建一个滚动条。使用 overflow:hidden不能解决问题，因为它还会将内容裁剪到菜单的高度。不幸的是，不可能做到 overflow:hidden只有一个方向。
然而，在玩弄了 fiddler 之后，我最终找到了这个解决方案:
.menuItem
{
padding: 0 1em;
float: left;
}
.menuItemContent
{
background-color: green;
display: none;
position: absolute;
z-index: 100;
clear: left;
}
并添加<div style="clear:both"></div>到菜单的末尾。
这会导致内容换行并出现在文本下方，而无需显式设置其 left或 top , 所以 position:relative在元素上是没有必要的。我已经在 Firefox、Internet Explorer 11 和 Chrome 中对其进行了测试。它实际上是一个更简洁的解决方案。
关于html - 绝对相对 : adapt position without size，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29457175/
24
4
0
ValueError Traceback (most recent call last) in 23 out
在 CSS 中，我从来没有真正理解为什么会发生这种情况，但每当我为某物分配 margin-top:50% 时，该元素就会被推到页面底部，几乎完全消失这一页。我假设 50% 时，该元素将位于页面的中间位
我正在尝试在 pyTorch 中训练我的第一个神经网络(我不是程序员，只是一个困惑的化学家)。 网络本身应该采用 1064 个元素向量并用 float 对它们进行评级。 到目前为止，我遇到了各种各样的
我有一个简单的问题。如何在 3 个维度上移动线性阵列？这似乎太有效了，但在 X 和 Y 轴上我遇到了索引问题。我想这样做的原因很简单。我想创建一个带有 block 缓冲区的体积地形，所以我只需要在视口
我正在尝试运行我购买的一本关于 Pytorch 强化学习的书中的代码。 代码应该按照本书工作，但对我来说，模型没有收敛，奖励仍然为负。它还会收到以下用户警告: /home/user/.local/li
我目前正在使用 this repo使用我自己的数据集执行 NLP 并了解有关 CNN 的更多信息，但我一直遇到有关形状不匹配的错误: ValueError: Target size (torch.Si
UIScrollView 以编程方式设置，请不要使用 .xib 文件发布答案。 我的 UIScrollView 位于我的模型类中，所以我希望代码能够轻松导入到另一个项目中，例如。适用于 iPad 或旋
我在我的 Ruby on Rails 应用程序(版本 4.3.1)中使用 Bootstrap gem。我最近发现了响应式字体大小功能 (rfs)。根据 Bootstrap 文档，它刚刚在 4.3 版中
这个问题不太可能帮助任何 future 的访客；它仅与一个小地理区域、一个特定时刻或一个非常狭窄的情况相关，而这些情况通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用，visit the
size 之间的语义区别是什么？和 sizeIs ?例如， List(1,2,3).sizeIs > 1 // true List(1,2,3).size > 1 // true Luis 在 c
我想从 div 中删除一些元素属性。我的 div 是自动生成的。我想遍历每个 div 和子 div，并想删除所有 font-size (font-size: Xpx)和 size里面font tag
super ，对 Python 和一般编程 super 新手。我有一个问题应该很简单。我正在使用一本使用 Python 3.1 版的 python 初学者编程书。 我目前正在写书中的一个程序，我正在学
我无法从 NativeBase 更改缩略图的默认大小。我可以显示默认圆圈，即小圆圈和大圆圈，但我想显示比默认大小更大的圆圈。这是我的缩略图代码: Prop 大小不起作用，缩略图仍然很小。 我的 Na
我是pytorch的新手。在玩张量时，我观察到了两种类型的张量- tensor(58) tensor([57.3895]) 我打印了它们的形状，输出分别是 - torch.Size([]) torch
这是我的 docker images 命令的输出: $ docker images REPOSITORY TAG IMAGE ID CREATED
来自 PriorityQueue 的代码: private E removeAt(int i) { assert i >= 0 && i < size; modCount++;
首先，在我的系统上保留以下内容:sizeof(char) == 1 和 sizeof(char*) == 4。很简单，当我们计算下面类的总大小时: class SampleClass { char c
我正在编写一个游戏来查找 2 个图像之间的差异。我创建了 CCSprite 的子类 Spot。首先我尝试创建小图像并根据其位置添加自身，但后来我发现位置很难确定，因为很难避免 1 或 2 个像素的偏移
我有一个 Tumblr Site每个帖子的宽度由标签决定。 如果一篇文章被标记为 #width200，CSS 类 .width200 被分配。 问题是，虽然帖子的宽度不同，但它们都使用主题运算符加载相
这个问题在这里已经有了答案: What is the ideal growth rate for a dynamically allocated array? (12 个答案) 关闭 8 年前。 我
我是一名优秀的程序员,十分优秀！