个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
30
4
我有两个向左浮动的元素。一个是 body 的第一个 child ，另一个是容器的第一个 child ，容器是 body 的第二个 child 。
...
<body>
<div class='child'>
</div>
<div class='container'>
<div class='child'></div>
</div>
</body>
...
容器具有固定宽度并使用“margin: 0 auto;”居中。目的是让容器 child 留在左边，但在窗口较小时容纳 body child 。
fiddle 在这里:
此解决方案在 Chrome 中运行良好；您会注意到，当您缩小窗口时，container child 会愉快地移到 body child 身边。
但是在 Firefox 中，当您缩小窗口时，容器子项会与主体子项重叠。
我为这两个 child 添加了一个悬停状态，它有效地“戳 DOM”并强制 Firefox 重新流动页面。当您将鼠标悬停在子项上时，页面会自行更正并且子项会进入“正确”位置。
这是一个错误吗？有解决方法吗？
最佳答案
更新 - 容器确实在 body 的第一个 child 下面流动仍在使用媒体查询，但更改了一些内容以允许容器子项相对于窗口而不是父项进行绝对定位: DEMO
从容器中移除position: relative。将两个 child div css 分开，并像这样在容器子上更改一些样式:
.child {
width: 100px;
height: 200px;
background-color: white;
border: 2px dashed black;
margin: 0px;
}
body > .child {
float: left;
z-index: 1;
}
.container > .child {
position: absolute; //relative to window since parent has no position
left: 100px;
}
然后在 700px 以上使用 media-query 将 position 改为 relative，left 改为 auto:
@media screen and (min-width: 700px) {
.container > .child {
position: relative; //override absolute position
left: auto; //override left: 100px
}
}
原创 - 容器不会在 body 的第一个 child 下面流动。我不知道是什么原因造成的(我猜这是从流中取出的一个 float 项，Firefox 对其进行了不同的处理)，但这里有一个使用媒体查询的解决方法: DEMO
对于固定宽度，你可以这样做:
.container { //use margin-left: 100px until the total width of the window is 700px (500px + 100px + 100px = container width + 100px on either side )
margin: 0 0 0 100px;
}
@media screen and (min-width: 700px) { //700px to account for 100px of left div (.container is centered at this size)
.container {
margin: 0 auto;
float: none;
}
}
我还会添加 * {box-sizing: border-box;}(带有适当的前缀、-moz-、-webkit-)来说明任何边框/填充。
关于html - Firefox float 元素需要 DOM 戳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20689775/
30
4
0
给定一个带有多个 date_time 戳的字符串，我想 提取第一个戳及其前面的文本 候选字符串可以有一个或多个时间戳 后续的 date_time 戳记将被 sep="-" 隔开 后续date_time
是否可以合并从相机拍摄的文本和照片？我想在照片上标记日期和时间，但我在 Google 上找不到任何内容。 最佳答案 使用下面的代码来实现你所需要的。 Bitmap src = Bitm
有没有办法通过 Graph API 戳另一个用户？基于this post ，并使用 Graph Explorer ，我发布到“/USERID/pokes”，我已经授予它(Graph API 应用程序和
我有两个向左浮动的元素。一个是 body 的第一个 child ，另一个是容器的第一个 child ，容器是 body 的第二个 child 。 ...
我是一名优秀的程序员,十分优秀！