草庐IT

DISPLAY1

全部标签

html - 空白 :nowrap breaks display:table

我快疯了。我使用了搜索和谷歌,但找不到解决方案,它不起作用:(我有一个div嵌套在其他div中,用于自动垂直居中和背景。最初它适合垂直放置多个图像并动态调整它们的大小。我根据图片的数量(宽度,填充)使用了几种css样式。但是对于这个画廊我有很多图片,原来的布局分为几行,但我想要一个嵌套的“white-space:nowrap”和overflow-x:auto;在我的分区中。所以我可以滚动它们,但是“white-space:nowrap”破坏了整个东西并破坏了所有显示:表格属性。我想这应该发生?但我需要一个其他解决方案或至少一个善意的提示。我还做了一个简化的fiddle:http://j

html - 显示 :inline rendering as display:block 的 Span 标记

我有一个这样的span标签 '/>它应该呈现为但是它是这样渲染的当我在浏览器中查看源代码时,它是这样呈现的不知道出了什么问题。注意:我通过在浏览器中动态地将display:block更改为display:inline获得了正确的图像。 最佳答案 您无法在您的CSS中轻松覆盖,因为该元素被设置为display:block内联(在您的HTML中),这可能是由您使用的框架决定的(如果没有,则很难说)进一步的细节)。因此,您需要阻止设置、删除它(即使用JS)或在您的CSS中覆盖它。要覆盖您的CSS,您需要使用!important,

html - "display: table"的 div 的最小高度在 Firefox 中不起作用

我已经为具有显示属性的div提供了一个最小高度作为表格,用于呈现内部文本垂直居中。给定的最小高度不适用于Firefox浏览器。我已经把代码放在一个fiddle里了:fiddleStateoftheMarketAddress:UpdateondevelopmentsintheglobalstoneindustrymoreInfo非常感谢任何帮助! 最佳答案 这实际上是一个Firefox错误参见:https://bugzilla.mozilla.org/show_bug.cgi?id=307866min-height不适用于displa

html - 响应式网格框架 - float : vs display: table-cell

我使用过Bootstrap,并研究过Foundation。据我所知,它们都使用float:来实现响应式网格。我还看到仅使用display:table-cell和@media查询的响应式网格。后者对我来说似乎更好,因为float:旨在实现特定的排版效果,因此使用它来实现响应式网格布局似乎是一种hack。我的问题:float:是否被bootstrap、foundation和其他响应式网格用于解决旧浏览器中缺乏适当的table-cell支持的问题?如果还有其他原因,我也想听听。 最佳答案 网格系统的制作方式大致有3种:floatinlin

html - Chrome 与 box-sizing :border-box in a display:table

我正在使用display:table进行小型2Pane布局。对于间距(也来自背景图像),我使用padding。因为我需要child从可用空间中获得一个精确的width:50%(考虑到父级div的填充),我使用box-尺寸:边框框。这在Opera中运行良好,但在Chrome中box-sizing:border-box甚至-webkit-box-sizing:border-box都被默默地忽略了。我制作了一个展示问题的演示。两个红色框应该是正方形,蓝色框的宽度和高度应该是200px:http://jsfiddle.net/fabb/JKECK/这是html源代码:Somethingonth

html - 为什么显示: block and display: flex render the same element with a different height?

所以我有一个内部有span的div。我在div上设置display:block或display:flex,在span上设置小字体。令人惊讶的是,这在div上给出了不同的高度。请参阅示例。如果我在body或div上设置较小的字体大小,则两者的高度相等。但是,如果我像示例中那样在span上设置较小的字体大小,则div会获得不同的高度。怎么来的?我能做些什么吗?span{font-size:0.8rem;border:1pxredsolid;}div{border:1pxbluesolid;}testtext1testtext2 最佳答案

html - "display: inline-flex"的元素有一个奇怪的上边距

我有两个div元素,它们都具有CSS属性display:inline-flex,因为我想将它们放在一起。起初,div的位置似乎正确。.userImg{height:3em;width:3em;background:red;display:inline-flex;}.nameOfUser{display:inline-flex;height:3em;width:10em;background:blue;}但是,一旦我在nameOfUserdiv中放置了一些文本,它似乎创建了一些奇怪的上边距,这使得两个div元素彼此未对齐..userImg{height:3em;width:3em;bac

javascript - AWS SDK JavaScript : how display upload progress of AWS. S3.putObject?

我正在开发一个JavaScript客户端来将文件直接上传到AmazonS3。UploadtoS3varbucket=newAWS.S3({params:{Bucket:'myBucket'}});varfileChooser=document.getElementById('file-chooser');varbutton=document.getElementById('upload-button');varresults=document.getElementById('results');button.addEventListener('click',function(){var

html - Bootstrap : Gap between columns on mobile display

我正在使用bootstrap3.0做一个网站,我希望HTML和CSS可以在台式机、平板电脑和移动设备上整齐地显示。我遇到的一个问题是,当您在移动显示器上查看网站时,列是堆叠的(我不是在批评它,因为这会尽可能地停止滚动)。但是,我希望列之间有一点间隙(甚至1-2px)。到目前为止的代码..content..content一个图像来显示它正在做什么并显示堆栈列如何在列之间实现一点间隙?谢谢 最佳答案 添加自定义类.column-margin以设置行/列之间的边距。@media(max-width:991px){.column-margi

javascript - CSS : Amazingly strikethrough not working on child display:inline-block div

我有一个代码,如果我在外部div上应用text-decoration:line-through;,所有内部div元素也必须是“删除线”。这通常可以100%正常工作;但是,如果我将子元素放置为“display:inline-block”,现在应用于父div的删除线不会影响子元素的删除线。我必须将child作为display:inline-block放置,并且我需要在text-decoration:line-through;添加到parentdiv时划掉child。div{padding:10px;}#outer{background:yellow;text-decoration:line