Tag: css3

柔性容器中的高度相等的行

正如你所看到的，第一row的list-items具有相同的height 。 但是第二row物品有不同的heights 。 我希望所有的物品都有统一的height 。 有没有办法实现这一点，而不是固定的高度 ，只使用flexbox ？ 这是我的code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> […]

n-child对class级没有反应

是否有可能得到第n孩子伪select器与特定的类工作？ 看到这个例子： http : //jsfiddle.net/fZGvH/ 我想让第二个DIV.red变成红色，但是它并不像预期的那样应用颜色。 不仅如此，而且当你指定这个时，它将第5个DIV改为红色： div.red:nth-child(6) 当你指定这个时，它将第8个DIV改为红色： div.red:nth-child(9) 这似乎是一个DIV背后。 这个例子中只有8个DIV标签，所以我不知道为什么n-child（9）甚至可以工作。 使用Firefox 3.6进行testing，但是在我的实际生产代码中，Chrome出现同样的问题。 我不理解这个应该如何工作的东西，将不胜感激澄清。 此外，这将改变第六个DIV为红色，但我真正想要的是它将第二个DIV.red更改为红色： div.red:nth-of-type(6) 我不明白为什么nth-child（）和nth-of-type（）以不同的方式响应，因为文档中只有8个相同types的标签。

可以：not（）伪类有多个参数？

我试图select除radio和checkbox以外的所有type的input元素。 许多人已经表明，你可以把多个参数:not ，但使用type似乎并不工作，无论如何，我尝试了。 form input:not([type="radio"], [type="checkbox"]) { /* css here */ } 有任何想法吗？

CSS3的border-radius属性和border-collapse：collapse不要混合。 我怎样才能使用边界半径来创build一个圆angular的折叠表？

编辑 – 原标题：是否有另一种方法来实现border-collapse:collapse在CSS中border-collapse:collapse （为了有一个折叠，圆angular表）？ 由于事实certificate，简单地让表格的边界崩溃并不能解决根本问题，我更新了标题以更好地反映讨论。 我正在尝试使用CSS3 border-radius属性制作圆angular的桌子 。 我使用的表格样式如下所示： table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } 这是问题。 我也想设置border-collapse:collapse属性，当设置border-radius不再有效。 有没有一种基于CSS的方式，我可以得到与border-collapse:collapse相同的效果border-collapse:collapse而不实际使用它？ 编辑： 我已经做了一个简单的页面来演示这个问题（仅适用于Firefox / Safari）。 似乎问题的很大一部分是设置表具有圆angular不影响angulartd元素的angular落。 如果桌子都是一种颜色的话，这个问题不会成为问题，因为我可以分别对第一行和最后一行进行四舍五入的顶部和底部tdangular。 不过，我使用不同的背景颜色来区分标题和条纹，所以内部的td元素也会显示它们的圆angular。 提议的解决scheme摘要： 用另一个带有圆angular的元素围着桌子不起作用，因为桌子的方angular“stream血”。 指定边框宽度为0不会折叠表。 在将单元格间距设置为零之后，底部的拐angular仍然平方。 使用JavaScript代替 – 避免了这个问题。 可能的解决scheme： 这些表格是用PHP生成的，所以我可以对每个外部应用一个不同的类并分别对每个angular落进行样式设置。 我宁愿不这样做，因为它不是很优雅，适用于多个表是一个痛苦，所以请保持build议即将到来。 可能的解决scheme2是使用JavaScript（特别是jQuery）来设置angular点的样式。 这个解决scheme也可以，但仍然不是我所期待的（我知道我很挑剔）。 我有两个保留： 这是一个非常轻量级的网站，我想保持最低限度的JavaScript 使用边界对我的吸引力的一部分是优雅的退化和渐进的增强。 通过对所有圆angular使用边界半径，我希望在CSS3function的浏览器中拥有一致的四舍五入网站，并且在其他网站（我在看你，IE）中有一致的方形网站。 我知道，今天尝试用CSS3做这件事似乎是不必要的，但我有我的理由。 我还想指出的是，这个问题是W3C规范的结果，而不是不好的CSS3支持，所以当CSS3有更广泛的支持时，任何解决scheme仍然是相关的和有用的。

媒体查询中的“屏幕”和“唯一屏幕”有什么区别？

媒体查询中的“屏幕”和“唯一屏幕”有什么区别？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 为什么我们要求使用' Only '。 screen本身是否提供了足够的信息来渲染只有屏幕？ 我见过很多响应式网站。 一些使用 @media screen and (max-width:632px) 一些 @media (max-width:632px) 还有一些 @media only screen and (max-width:632px)

内嵌块框不适合他们的容器

不知道我做错了什么，我认为通过添加边框，它将整齐地适合这4个盒子。 http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; } <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div>

使用flex order属性重新安排桌面和移动视图的项目

我有一个容器内的3个div。 没有嵌套的div。 我正在使用flex和order属性。 在移动设备上， order属性可以。 但在更大的屏幕上，它失败了。 我没有使用div 2和3的容器div，以便在移动设备上将它们命名为2,1,3。 HTML文件 <div class="container"> <div class="orange">1</div> <div class="blue">2</div> <div class="green">3</div> </div> CSS文件 /*************** MOBILE *************/ .container { display: flex; flex-wrap: wrap; } div.blue { order:1; width: 100%; } div.orange { order:2; width: 100%; } div.green { order:3; width: 100%; } /***************************/ @media screen and (min-width:1200px) { .container { […]

CSS3的attr（）在主stream浏览器中不起作用

我在我的HTML文件中有这个： <a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a> 这在CSS文件中： .window > .content .wbutton.tint { border: solid thin attr(data-tint, color); box-shadow: inset 0 0 50px attr(data-tint, color); } Firefox在Firebug中返回一个CSS错误。 我做错了什么？ 根据W3C规范的attr()函数 ，它应该工作。 （另外， 在MDN Wiki中有一个关于attr()的页面 ，所以我认为它应该至less在Firefox中工作）

只有CSS的砌体布局，但水平排列元素

我需要实现一个相当普通的砌体布局。 但是，由于一些原因，我不想使用JavaScript来做到这一点。 参数： 所有的元素都有相同的宽度 元素的高度不能计算在服务器端（一个图像加上不同数量的文本） 如果必须的话，我可以生活在固定数量的专栏中 有一个简单的解决scheme，可以在现代浏览器中使用column-count属性。 该解决scheme的问题是元素按列sorting： 虽然我需要sorting的元素，至less大约： 我尝试过的方法不起作用： 制作项目display: inline-block ： 浪费垂直空间。 制作项目float: left ： 大声笑，没有。 现在，我可以更改服务器端渲染，并重新排列项数除以列数的项目，但这是复杂的，容易出错（基于浏览器如何决定将项目列表拆分成列），所以我想如果可能的话避免它。 有没有一些新的灵活的魔术，使这成为可能？

如何从css中断行，而不使用<br />？

输出： 你好 你好吗 码： <p>hello <br /> How are you </p> 如何实现相同的输出没有<br /> ？