Tag: css3

如何在Flexbox中禁用相同高度的列？: 我有三个元素，我试图在我的布局alignment。首先，我有一个div的反馈，然后一个searchinput，然后一个div元素的build议。我希望第一个和最后一个元素的宽度为20％，searchinput的宽度为60％。使用Flexbox我达到了我想要的。但是，有一个function，所有的divs最高的元素。这意味着当search结果popup时，反馈和build议元素与searchdiv一起增长，导致布局混乱。有没有一个诀窍，不发展最高元素的divs？只要使div（ #feedback和#suggestions ）有他们的内容的高度？ #container_add_movies { display: flex; } #container_add_movies #feedback { width: 20%; background-color: green; } #container_add_movies #search { width: 60%; background-color: red; } #container_add_movies #suggestions { width: 20%; background-color: yellow; } <div id='container_add_movies'> <div id='feedback'> Feedback </div> <div id='search'> Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search […]

selectCSS中的每个第N个元素: 是否可以select一组元素中的每个第四个元素？例如：我有16个<div>元素…我可以写一些类似的东西。 div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16) 有没有更好的方法来做到这一点？

CSS3select器：类名称的第一个types？: 是否有可能使用CSS3select器:first-of-typeselect具有给定类名的第一个元素？我的testing没有成功，所以我觉得不是？该代码（ http://jsfiddle.net/YWY4L/ ）： p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} <div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div>

为什么Firefox的flex项目没有百分比填充/边距？: 我想在flexbox里有一个方形的div。所以我使用： .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } <div class="outer"> <div class="inner"> <a>hehe</a> </div> </div> 这在Chrome中正常工作。但在Firefox中，父母只挤到一行。我如何在Firefox中解决这个问题？我使用版本44。您也可以通过https://jsbin.com/lakoxi/edit?html,css查看代码

带有箭头的讲话泡泡: 我有一个项目，我需要插入语音泡沫/消息框。我试图达到的一般形状是这样的： .bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer; } .triangle { width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; cursor:pointer; } <div class="bubble">Speech bubble </div> <div class="triangle"> </div> 由于透明边框也是可点击的，因此目前不能通过命中testing。目标点击框（可点击/可平放的区域）需要坚持形状的边界（这里的透明边框也是可以放置的，使之无效）。我需要显示形状在各种内容（图像，gradents，文字…），问题我在操作这个形状时遇到的主要问题是：能够根据指向元素的位置（上/左/右/下侧）移动气泡周围的三angular形，当需要强调时，在其周围添加边框或框阴影有没有解决这些问题？

定位最后一行的弹性项目: 我的问题是，我想要的可变范围宽度的柔性盒，一切运作良好，但不是在最后一行。即使在行不满儿童（最后一行）的情况下，我也希望所有孩子都有同样的维度。 #products-list { position:relative; display: flex; flex-flow: row wrap; width:100%; } #products-list .product { min-width:150px; max-width:250px; margin:10px 10px 20px 10px; flex:1; } 在JSFiddle的例子中，我创build了一个dynamic的情况。我的flex div可以缩小到150px，长到250px，但所有的都必须是相同的大小（显然我想要一个CSS解决scheme，JS我知道的方式）。

透明的箭头/三angular形: 我想在图像上做一个透明的箭头。这个三angular形应该在一个块中缩进并显示背景图像。期望的输出： CSS： .barShow { background-color: #000; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .barShow:before { top: 0%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #999; border-width: 20px; margin-left: -20px; } 透明的CSS箭头应该是透明的，没有颜色。

居中并右alignmentflexbox元素: 我想让A B和C在中间alignment。我怎样才能让D完全走向正确的？之前：后：这样做的最佳做法是什么？ ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> https://jsfiddle.net/z44p7bsx/

为什么是我的jQuery：不（）select器不工作在CSS？: 我有这样的布局： <div id="sectors"> <h1>Sectors</h1> <div id="s7-1103" class="alpha"></div> <div id="s8-1104" class="alpha"></div> <div id="s1-7605" class="beta"></div> <div id="s0-7479"></div> <div id="s2-6528" class="gamma"></div> <div id="s0-4444"></div> </div> 有了这些CSS规则： #sectors { width: 584px; background-color: #ffd; margin: 1.5em; border: 4px dashed #000; padding: 16px; overflow: auto; } #sectors > h1 { font-size: 2em; font-weight: bold; text-align: center; } #sectors > div { float: […]

如何居中柔性容器，但左alignmentFlex项目: 我想弹性项目居中，但当我们有第二行，有5（从下面的图像）下1，而不居于父母。以下是我的一个例子： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> http://jsfiddle.net/8jqbjese/2/