Tag: css3

在CSS中，使用“…”表示溢出的多行块: 同 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 如果溢出，则会在行尾显示“…”。但是，这只会显示在一行中。但是我希望能够多线显示。它可能看起来像： +——————–+ |abcde feg hij dkjd| |dsji jdia js ajid s| |jdis ajid dheu d …|/*Here it's overflowed, so "…" is shown. */ +——————–+

将div垂直居中在另一个div内: 我想要中心一个div被添加到另一个div中。 <div id="outerDiv"> <div id="innerDiv"> </div> </div> 这是我目前使用的CSS。 #outerDiv{ width: 500px; height: 500px; position:relative; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 50%; left:50%; margin-top: -147px; margin-left: -144px; } 正如你所看到的，我现在使用的方法取决于innerDiv宽度和高度的innerDiv 。如果宽度/高度改变，我将不得不修改margin-top和margin-left是否有任何通用的解决scheme，我可以使用innerDiv中心总是不pipe它的大小？我发现使用margin:auto可以将innerDiv横向排列在中间，但纵向排列中间呢？

中心和底部alignment弹性项目: 我有一个flex容器（蓝色方块）具有以下属性： display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; 因此，它的孩子（淡蓝色的方块）按照您在下面看到的方式排列。但是，我想从正常stream程中添加另一个孩子（绿色方块），并将其定位在父母的相对位置。要定位，如下所示，我最好写一些像bottom: 20px; 和margin: auto; 。我试图玩z-index无济于事。我应该如何处理这个？我应该诉诸创造另一个父母元素？

浮动：左; vs display：inline; vs display：inline-block; vs display：table-cell;: 我的问题这些方法中的任何一种都是专业网页devise师的首选吗？在绘制网站时，是否有任何这些方法是由networking浏览器提供的？这全是个人喜好吗？还有其他的技术我错过了吗？注意：以上问题涉及devise多列布局浮动：左; http://jsfiddle.net/CDe6a/ 这是我创build列布局时总是使用的方法，它似乎工作得很好。虽然父母自己也崩溃了，所以你只需要记住clear:both; 之后。我刚刚发现的另一个问题是无法垂直alignment文本。显示：内联; 这似乎纠正了崩溃的父母的问题，但增加了空白。 http://jsfiddle.net/CDe6a/1/ 从html中删除空格似乎是最简单的解决这个问题，但如果你真的挑剔你的HTML是不希望的。 http://jsfiddle.net/CDe6a/2/ 显示：内联块; 似乎行为完全像display:inline; 。 http://jsfiddle.net/CDe6a/3/ 显示：表细胞; http://jsfiddle.net/CDe6a/4/ 完美的作品。我的想法：我确定我错过了一大堆东西，比如某些会破坏布局的exception，但是display:table-cell; 似乎工作最好，我想我会开始取代float:left; 因为我似乎总是弄得clear:both; 。我已经在网上阅读了很多关于这方面的文章和博客，但是在布置我的网站时，他们没有给我一个明确的答案。

CSS3渐变边框: 我正在尝试将渐变应用于边框，我认为这样做很简单： border-color: -moz-linear-gradient(top, #555555, #111111); 这不起作用，有没有人知道什么是做边界渐变的正确方法是。

flex-wrap如何与align-self，align-items和align-content一起工作？: align-self 在以下代码中， align-self与flex-wrap: nowrap 。 flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 但是当容器切换到flex-wrap: wrap ， align-self属性失败。 flex-container { display: […]

与CSS等高的列: 我想为我的CSS表使用百分比。不幸的是，它不适合我。这个代码有什么问题？我应该使用flexbox而不是表？我想用表，因为我想要相同的高度栏。 ul { list-style: none; margin: 0; display: table; table-layout: fixed; width: 100%; } li { width: 50%; display: table-cell; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>

flex属性不能在IE中工作: 我一直无法确定为什么flexbox不能在IE 11中工作。为了testing，我从CodePen获得了一个非常简单的flexbox布局，并粘贴了下面的信息。 Chrome按预期工作; IE11失败。在Chrome上运行的布局成功的图像： IE11上的布局失败的图像 body { background: #333; font-family: helvetica; font-weight: bold; font-size: 1.7rem; } ul { list-style: none; } li { background: hotpink; height: 200px; text-align: center; border: 2px solid seashell; color: seashell; margin: 10px; flex: auto; min-width: 120px; max-width: 180px; } .flex { display: flex; justify-content: flex-start; flex-wrap: wrap; } […]

Flexbox不处理button或字段集元素: 我试图用flexbox的justify-content: center标记<button> -tag的内部元素。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签，并按预期工作（请参阅<p> -tag）。只有button是左alignment的。尝试Firefox或Chrome，你可以看到不同之处。是否有任何用户代理风格，我必须覆盖？或者解决这个问题的其他方法？ div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> 和一个jsfiddle： http : //jsfiddle.net/z3sfwtn2/2/