- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在为以下问题寻找 HTML/CSS 解决方案。
我目前在我的网页左侧有一个侧边栏类型的元素。在右侧,我想放置几个信息面板。我希望这些信息面板根据窗口的大小自行调整大小,同时保持在侧边栏的右侧。我想为所有这些面板设置单独的背景,让每个面板都有独特的感觉(想想 PowerPoint,但更好)。
为了完成这一切,我在网站上设置了一个固定的 div 作为侧边栏,它的宽度必须正好为 92px。我在这个固定的 div 的右边也有几个 div。我需要让右侧的“面板”div 根据视口(viewport)宽度自行调整大小,所以目前我正在将它们的宽度设置为屏幕的 100%。为了确保背景图像适合“面板”div,无论它们的大小如何,我使用了 background-size:contain;
行。
除一件事外一切正常:“面板”div 位于固定 div 下方,并且这些 div 的背景图像被截断。我做了一个 JSFiddle 来强调这一点:http://jsfiddle.net/32yZL/
您会注意到三行文字“This is a test. This is a test. This is a test.”在左边被切断。这很容易通过向 div 添加 92px 的填充来解决,但我一直无法为“面板”div 的背景图像找到类似的解决方案。
有什么建议吗?
编辑:感谢大家的回复。我已经尝试了所有方法,但没有一个起作用,我认为这是我的错。我不知道 JSFiddle 可以导入外部文件(是的,我知道,我是瞎子),我创建了一个新文件,希望能更好地强调这个问题:
http://jsfiddle.net/ChrisBush/womLk4c9/
您会注意到 div 的背景图像仍在边栏后面,但文本没问题。我希望背景图片与侧边栏齐平。有什么建议吗?
编辑 2:在对这个元素进行更多工作后,我开始意识到这个问题有多种解决方案。不幸的是,我正在使用我从网络上的网站中提取的一些免费 js 在网站上创建视觉效果,这使事情变得复杂,远远超出了本文的范围,并使您的大部分答案变得无关紧要。我想我将尝试重写一些 js,为此我将在其他地方发表另一篇文章。再次感谢您的所有建议!
最佳答案
我将右侧幻灯片包裹在 <div id="slide_wrap">
中我给了margin-left: 92px;
.
这将使它们不会出现在您固定的侧边栏下方。
编辑:响应您的代码编辑,这个问题不是它在侧边栏下,而是背景定位固定。如果您删除了 fixed
从你的背景声明中,这修复了它。
关于html - HTML 中的固定位置 div 位于辅助 div 的背景图像前面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25148553/
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
我正在开发一个简单的应用程序,宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。 我正在尝试创建一个功能,用户可以点击他们的图板,将他们重定向到他们的图板,该图板将显示他们所有的宠物图片。 当我
我有这样的事情:循环遍历 ids,并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务,它确实有效。示例代码:
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后,我收到以下错误。最初该
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
说到 UINavigationBar 时我有点困惑。我以编程方式设置它,它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
我有以下查询,它可以满足我的要求,并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围,但我不知道该怎么做。 SELECT u.`id` as `user_id`
我有一个 ListView (不是 recyclerView),其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后,我希望 EditTe
我的 cellAtIndexPath 中有一个查询。正如常见的那样,此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询,还是将其算作每个 indexPat
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时,您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
我在 ViewController 之间通过引用传递特定模型的数组。 如果我更改数组中特定元素的任何值,它会在所有 ViewController 中很好地反射(reflect),但是当我从该数组中删除
svg 包含更多元素,其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击,而不能在选择器的其他任何地方被点击。 选择器称为 yp-date-range-selector。在下一张图片中,
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中,按钮本身没有问题,但我需要将其居中放
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是,我不想保持图像响应,我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。 下面是我的代码:
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
我有一个应用程序,其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中,当我在 Interface Builder 中设计我的 NIB 时,所有这
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核,但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {
我是一名优秀的程序员,十分优秀!