草庐IT

css-calc

全部标签

html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案?

这个问题需要解释一下。请耐心等待:几个月前,我为网站上的一个部分设置了一个由三部分组成的标题。在此标题的左侧有一个标题,其内容可以更改。右侧是一个Logo,始终为150像素宽x60像素高。它们之间是一组双线。像这样:[这是标题]=======================================[Logo这里]这个网站是响应式的,所以标题的整体宽度是可变的。标题必须始终位于一行中。包含双线的div需要更改大小以填充标题和Logo之间的空间。我最初设置它以便使用媒体查询和calc();调整行的大小;功能。然而,该网站必须一直兼容到IE8,所以我最终写了一些JS来让它工作。这是一

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

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

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

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

html - 如何使用 calc 属性使过渡属性在 IE 中工作?

element1{height:calc(100%-50px);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;}element1:hover{height:calc(100%-200px);}当我将height属性中的calc替换为px时或%,过渡工作正常,但使用calc,只是从一个高度到另一个高度而没有过渡。其他浏览器正常,只有IE有问题添加代码和JSFiddleexample跟我的真实情况差不多。div{position:fixed;rig

html - 如何使用 calc 属性使过渡属性在 IE 中工作?

element1{height:calc(100%-50px);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;}element1:hover{height:calc(100%-200px);}当我将height属性中的calc替换为px时或%,过渡工作正常,但使用calc,只是从一个高度到另一个高度而没有过渡。其他浏览器正常,只有IE有问题添加代码和JSFiddleexample跟我的真实情况差不多。div{position:fixed;rig

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