Tag: css3

当flexbox项目以列模式包装时，容器不会增加其宽度: 我正在嵌套的flexbox布局应该如下工作：最外层（ ul#main ）是一个水平列表，在向其中添加更多项目时，该列表必须向右扩展。如果它变得太大，应该有一个水平的滚动条。 #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* …and more… */ } 这个列表（ ul#main > li ）的每个项目都有一个标题（ ul#main > li > h2 ）和一个内部列表（ ul#main > li > ul.tasks ）。这个内部列表是垂直的，在需要的时候应该换行。当包装到更多的列时，其宽度应该增加，以腾出更多的项目的空间。这个宽度增加也应该适用于外部列表的包含项目。 .tasks { flex-direction: column; flex-wrap: wrap; /* …and more… */ } 我的问题是，当窗口的高度变得太小时，内部列表不会换行。我已经尝试了很多篡改所有的flex属性，试图按照CSS的技巧准则，但没有运气。这JSFiddle显示了我到目前为止。预期的结果 […]

无法滚动到溢出容器的弹性项目的顶部: 所以，在尝试使用flexbox制作一个有用的模式时，我发现似乎是一个浏览器问题，并且想知道是否有一个已知的修复或解决方法 – 或者如何解决它的想法。我试图解决的事情有两个方面。首先，让模态窗口垂直居中，按预期工作。第二个是让模态窗口滚动 – 外部，所以整个模式窗口滚动，而不是它的内容（这样你就可以有下拉菜单和其他UI元素，可以扩展到模态范围之外 – 像自定义dateselect器等）但是，当将垂直居中与滚动条组合在一起时，模态的顶部可能变得无法访问，因为它开始溢出。在上面的例子中，你可以resize来强制溢出，这样做可以让你滚动到模态的底部，但不能到顶部（第一段被截断）。这里是示例代码的链接（高度简化） https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes […]

标题之前和之后的图像: 我想在中心标题之前和之后创build一行。该行和文本必须具有透明背景，才能将其放置在不平坦的背景上。该行不能是100％的宽度，如下所示：标题的文字可能会改变：标题宽度未知标题可以跨越几行 h1 { text-align: center; border-bottom: 1px solid #000; } <h1>Today</h1>

展开一个div来取其余的宽度: 我想要一个双列div布局，其中每个可以有可变的宽度，例如 div { float: left; } .second { background: #ccc; } <div>Tree</div> <div class="second">View</div> 我想'视图'div扩大到'树'div填补需要的空间后可用的整个宽度。目前我的“视图”div被调整到它包含的内容。如果两个div都占据整个高度，这也是很好的不重复免责声明：浮动时将div扩展为最大宽度：设置为left，因为左边的宽度是固定的。帮助div – 使div适合其余的宽度，因为我需要两列都alignment到左侧

将省略号应用于多行文本: 是否有一个解决scheme添加省略号最后一行的stream体高度（20％）的div内？我在CSS中find了-webkit-line-clamp函数，但在我的情况下，行号取决于窗口大小。 p { width:100%; height:20%; background:red; position:absolute; } <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis […]

弹性基础和宽度之间有什么区别？: 有关于这方面的问题和文章，但据我所知，没有任何结论。我能find的最好的总结是 flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 …这本身并没有太多的关于柔性基础设置元素的行为。用我目前对flexbox的知识，我不明白为什么不能描述宽度。我想知道如何在实践中完全不同于宽度的 flex-basis ：如果我用flex来代替宽度（反之亦然），那么视觉上会有什么变化呢？如果我同时设置不同的值，会发生什么？如果他们有相同的价值会发生什么？是否有一些特殊的情况下使用宽度或弹性基础会有显着的差异，使用另一个？在与其他Flexbox风格（例如flex-wrap ， flex-grow和flex-shrink）结合使用时，宽度和flex基础有何不同？任何其他重大差异？编辑/澄清：这个问题已经被问到一个不同的格式什么完全弹性基础属性集？但是我觉得对flex-basis和width （或者height ）差异的更直接的比较或者总结会更好。

我如何保持两个并排高度相同的div？: 我有两个div并排。我想他们的高度是相同的，如果他们中的一个resize，保持不变。我无法弄清楚这一点。想法？为了弄清楚我这个令人困惑的问题，我希望两个盒子的大小始终相同，所以如果一个盒子因为放入文本而长大，另一个盒子的长度应该与高度相匹配。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div>

如何在同一个元素上组合背景图像和CSS3渐变？: 我如何使用CSS3渐变为我的background-color ，然后应用background-image应用某种光透明纹理？

形状与倾斜的一面（敏感）: 我正在尝试创build一个如下图所示的形状，仅在一侧（例如底侧）倾斜边缘，而其他边缘保持笔直。我尝试使用边框方法（代码如下），但我的形状的尺寸是dynamic的，因此我不能使用此方法。 .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape">Some content</div> 我也尝试使用渐变背景（如下面的代码），但随着尺寸的变化，它会变得混乱。你可以看到我的意思是盘旋在下面的片段的形状。 .gradient { display: inline-block; vertical-align: top; height: 200px; width: 100px; […]

100％宽度的HTML表格，tbody内部有垂直滚动条: 我怎样才能设置<table> 100％的宽度，并只放在<tbody>垂直滚动一些高度？ table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> <td>Content 4</td> <td>Content 5</td> […]