个人中心
文章发布
退出
作者热门文章
- 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
我想要做的是在每个框的蓝色标题之后获取红色文本。 看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。 你知道为什么即使我将 positi
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。 以下是分解为基本组成部分的方法: SOME HEADER
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数 它给出的输出类
我有一个小问题。 我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。 如果它不是绝对定位的，那么这将迫使同一行中
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
当它的位置绝对时，我试图使一个框宽度为 100%？ 下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。 我知道这听起来很菜
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。 有时候，当我请求某个对象的.posit
我是一名优秀的程序员,十分优秀！