Tag: css3

Flexbox代码可用于除Safari之外的所有浏览器。为什么？: 带有列表标签的网格列，我需要按照每3列按正确的顺序显示，并为每个额外的HTML列表元素启用自动宽度。这是我的例子： <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> 我想要像这样转换输出： 1 4 7 10 2 5 8 11 3 6 9 12 这是我迄今为止所尝试过的，并且在其他所有浏览器上都能正常工作，但是与Safari浏览器不兼容，除非添加以下内容： display: -webkit-flex; 。 <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: […]

保持div与CSS的纵横比: 我想创build一个div，可以改变宽度/高度随着窗口宽度的变化。有没有任何CSS3的规则，可以让高度根据宽度改变，同时保持其纵横比？我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。

为什么不弹性项目收缩过去的内容大小？: 我有4个flexbox列，一切正常，但是当我添加一些文本到列，并将其设置为一个大的字体大小，这是由于flexbox设置，使列比应该是更广泛。我试图使用word-break: break-word ，它帮助，但是，当我调整列的宽度非常小时，文本中的字母被分成多行（每行一个字母），但是列没有得到小于一个字母的宽度。尝试观看这个video： http : //screencast-o-matic.com/watch/cDetln1tyT （在开始，第一列是最小的，但当我调整窗口，这是最宽的列。我只是想尊重柔性设置总是..弹性尺寸1：3：4：4）我知道，设置字体大小和列填充到更小将有助于…但有没有其他解决scheme？我不能使用overflow-x: hidden 。 JSFiddle： https ：//jsfiddle.net/78h8wv4o/3/ .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } […]

在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？: 考虑柔性容器的主轴和交叉轴：来源： W3C 要沿主轴alignment弹性项目，有一个属性： justify-content 要沿着横轴alignment弹性项目，有三个属性： align-content align-items align-self 在上图中，主轴是水平的，横轴是垂直的。这些是flex容器的默认方向。但是，这些方向可以很容易地与flex-direction特性互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （横轴始终垂直于主轴。）我在描述斧头的工作方面的重点是，在任何一个方向似乎都没有什么特别之处。主轴，横轴，重要性和flex-direction都相等，方便来回切换。那么为什么十字轴会有两个额外的alignment属性？为什么align-content和align-items合并到主轴的一个属性中？为什么主轴不能得到一个justify-self财产？这些属性将是有用的scheme：将柔性物品放置在柔性容器的拐angular处 #box3 { align-self: flex-end; justify-self: flex-end; } […]

嵌套柔性容器时正确使用柔性属性: 我在正确使用flexbox时遇到了问题，并希望得到关于嵌套父元素和子元素如何工作的一些说明。我知道孩子继承父母的柔性。但是如果你需要为孩子（孩子）弯曲一个孩子，它会被覆盖吗？什么是flexbox的正确使用？我什么时候需要申请display: flex为了孩子的（孩子），为了孩子的柔韧性，还是会覆盖孩子的父母的弹性？ .parent-container { display: flex; flex: 1 0 100%; } .child-container { flex: 1 1 50% } .baby-of-child-container { flex: 1 1 50%; } <div class='parent-container'> <div class='child-container'> <div class='baby-of-child-container'></div> <div class='baby-of-child-container'></div> </div> <div class='child-container'> <div class='baby-of-child-container'></div> <div class='baby-of-child-container'></div> </div> </div>

CSS否定伪类：not（）为父/祖先元素: 这使我疯狂： HTML： <div><h1>Hello World!</h1></div> CSS： *:not(div) h1 { color: #900; } 这是不是读取“选择具有祖先不是一个div元素的所有h1元素…？” 因此，“Hello World！” 不应该被染成红色，但它仍然是。对于上面的标记，添加子组合子的作品： *:not(div) > h1 { color: #900; } 但是，如果不是div元素的子元素，则不会影响h1元素。例如： <div><article><h1>Hello World!</h1></article></div> 这就是为什么我希望将h1元素指定为div元素的后代，而不是子元素。任何人？

CSS3背景图片过渡: 我正在尝试使用CSS转换来实现“淡入淡出”效果。但我不能得到这个与背景图像工作… CSS： .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; […]

'transform3d'不能与位置：固定的孩子: 我有一个情况，在正常的CSS情况下，一个固定的div将被准确定位在指定的位置（ top:0px ， left:0px ）。如果我有一个具有translate3d转换的父项，这似乎不被尊重。我没有看到什么？我曾尝试其他的webkit转换像风格和转换原点选项，但没有运气。我已经附上了一个JSFiddle的例子，我可以预料黄色框在页面的顶部，而不是在容器元素的内部。 http://jsfiddle.net/GMX5H/1/ 这是小提琴的简化版本： <br> <div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> <div style='position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> Inner block </div> </div> 任何使translate3d与固定位置的孩子一起工作的指针将不胜感激。

如何使CSS3圆角在Chrome / Opera中隐藏溢出: 我需要一个父div的圆角掩盖其孩子的内容。 overflow: hidden在简单的情况下工作，但是在父级相对或绝对定位的情况下，基于webkit的浏览器和Opera会中断。这适用于Firefox和IE9： CSS #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } HTML <div id="wrapper"> <div id="box"></div> </div> JSFiddle示例谢谢您的帮助！更新：导致此问题的错误已经在Chrome中修复。不过，我还没有重新测试Opera或Safari。