草庐IT

css-flexbox

全部标签

html - 在 HTML 和 CSS 中通过重叠的 div 显示背景图像

谁能告诉我下面的场景是否可以用HTML和CSS实现?我的目标是通过剪切的div显示我的HTML正文的背景图像。请记住,最终的网站将是响应式的(移动设备优先),因此该解决方案应允许在调整大小时对body背景图像进行不同的定位。基本上:是否可以将div显示为底层div的剪切?我考虑过为每个圆圈提供单独的背景图片,以显示圆圈显示body背景的错觉,但由于设计是响应式的,很快就会出现对齐问题。有什么见解吗?如果需要更多数据,请告诉我。提前致谢。 最佳答案 我认为这是相似的:http://ask.webatall.com/html5/7619

html - 如何阻止 HTML/CSS 在页面之间将一行文本分成两半进行打印?

有人知道为什么会发生这种情况以及如何阻止它发生吗?我目前正在设计一个仅供打印的.css文件的样式,而且我一生都不知道如何修复此行拆分。这是问题的图片:这是用AngularJS构建的,这个内容被拉入/被这个部分拉入:◀BACKPrintPART{{section.number|number:0}}:{{section.name|uppercase}}{{subSection.name|uppercase}}{{content.caption}}{{th.item}}{{answer.answerLabel}}Submit{{correctAnswers}}%ofyourans

html - 如何阻止 HTML/CSS 在页面之间将一行文本分成两半进行打印?

有人知道为什么会发生这种情况以及如何阻止它发生吗?我目前正在设计一个仅供打印的.css文件的样式,而且我一生都不知道如何修复此行拆分。这是问题的图片:这是用AngularJS构建的,这个内容被拉入/被这个部分拉入:◀BACKPrintPART{{section.number|number:0}}:{{section.name|uppercase}}{{subSection.name|uppercase}}{{content.caption}}{{th.item}}{{answer.answerLabel}}Submit{{correctAnswers}}%ofyourans

css - onTablet 和 onDesktop html 属性的用途是什么

Bootstrap2metro主题使用onTablet和onDesktophtml属性,如https://github.com/jiji262/Bootstrap_Metro_Dashboard/blob/master/index.html#L386我使用在线自动转换器将这个主题转换为Bootstrap3。这些属性没有改变,现在显示为我搜索了html规范和这个metro主题源代码,但没有找到对这些的任何引用。为什么要使用这些属性,删除它们是否安全? 最佳答案 来自http://pydoc.net/我发现这些属性被用作Bools来显示

css - onTablet 和 onDesktop html 属性的用途是什么

Bootstrap2metro主题使用onTablet和onDesktophtml属性,如https://github.com/jiji262/Bootstrap_Metro_Dashboard/blob/master/index.html#L386我使用在线自动转换器将这个主题转换为Bootstrap3。这些属性没有改变,现在显示为我搜索了html规范和这个metro主题源代码,但没有找到对这些的任何引用。为什么要使用这些属性,删除它们是否安全? 最佳答案 来自http://pydoc.net/我发现这些属性被用作Bools来显示

html - CSS - 使用 calc 使页面右侧有额外空间

如何去掉右边多余的空间?我试过只float,使用内联、inline-block,并使用margin-left而不是.left中的偏移量。我进行了故障排除,发现是这个html(.content-list{left:calc(50%+85px);};)导致了问题。但我不知道如何修复它。HTMLEditAccountSomethingElseAustinPerezSomewhere,UnitedStatesWebsiteCSS.page-container{padding-top:62px;position:relative;}.profile-banner{@includetransiti

html - CSS - 使用 calc 使页面右侧有额外空间

如何去掉右边多余的空间?我试过只float,使用内联、inline-block,并使用margin-left而不是.left中的偏移量。我进行了故障排除,发现是这个html(.content-list{left:calc(50%+85px);};)导致了问题。但我不知道如何修复它。HTMLEditAccountSomethingElseAustinPerezSomewhere,UnitedStatesWebsiteCSS.page-container{padding-top:62px;position:relative;}.profile-banner{@includetransiti

html - 使 div CSS "display: table-cell"仅与 div 中的文本一样宽

我问这个SOquestion昨天让省略号在我的测试表单中起作用。但是,我现在有另一个我无法解决的问题,它与我给出的答案有关。当我在小预览中显示用户数据时,省略号生效并显示给用户。这是通过在HTML中使用display:table-cell来完成的。如下图:当用户在更大的模态窗口中查看相同代码时,省略号不再有效,因为有空间显示用户数据。然而,这使得Datadicompletamento(resumeStyleFinishDateLabel25)太宽了,如下所示:如何更改CSS以便Datadicompletamento的div仅与文本一样宽Datadicompletamento并位于开始日

html - 使 div CSS "display: table-cell"仅与 div 中的文本一样宽

我问这个SOquestion昨天让省略号在我的测试表单中起作用。但是,我现在有另一个我无法解决的问题,它与我给出的答案有关。当我在小预览中显示用户数据时,省略号生效并显示给用户。这是通过在HTML中使用display:table-cell来完成的。如下图:当用户在更大的模态窗口中查看相同代码时,省略号不再有效,因为有空间显示用户数据。然而,这使得Datadicompletamento(resumeStyleFinishDateLabel25)太宽了,如下所示:如何更改CSS以便Datadicompletamento的div仅与文本一样宽Datadicompletamento并位于开始日

javascript - 如何通过 CSS 或 Javascript 默认浏览器 'Reader View' 模式?

所有现代网络浏览器现在都提供“阅读器View”模式。是否可以通过CSS和/或Javascript告诉浏览器在屏幕宽度不超过480像素的移动设备上自动使用“阅读器View”版本?我只是不想创建网站的移动版本,因为“阅读器View”版本在移动设备(屏幕宽度为320px-480px)上运行完美。附言。我不是在触发阅读器View图标时查找信息-我想在屏幕宽度小于480像素的移动设备上强制使用阅读器View模式。此外,ReaderView模式在其他浏览器中也可用(不仅在Firefox中)。 最佳答案 Reader模式的URL是:about:r