草庐IT

webkit-flex

全部标签

html - 文本未包装在 flex 容器内

我设法将灵活的框布局模块用于很多事情,但是当涉及到段落时,我遇到了这个问题:当我使用少量文本时,一切都按预期工作:当我使用大量文本时,布局会中断:这是我使用的代码:body{width:90%;margin:3emauto;background-color:#aaa;}section{display:flex;flex-flow:rowwrap;justify-content:space-between;border:1pxsolidblack;}.title{flex:10100%;text-align:center;background-color:#eee;}.image{fle

html - 额外的 div 导致图像高度无法正确缩放(显示 : flex)

我从here中获取了代码.代码运行良好,但是当我添加一个额外的div来用类fullwidth包装div时,图像高度不会根据屏幕的高度。原来是这样的:body,html{height:100%;}.fullwidth{display:flex;flex-direction:column;height:100%;}.repeat-x{flex:1;background-size:cover;background-repeat:no-repeat;background-position:centercenter;}.bg-1{background-image:url(http://oi65.

html - 额外的 div 导致图像高度无法正确缩放(显示 : flex)

我从here中获取了代码.代码运行良好,但是当我添加一个额外的div来用类fullwidth包装div时,图像高度不会根据屏幕的高度。原来是这样的:body,html{height:100%;}.fullwidth{display:flex;flex-direction:column;height:100%;}.repeat-x{flex:1;background-size:cover;background-repeat:no-repeat;background-position:centercenter;}.bg-1{background-image:url(http://oi65.

html - webkit边框半径结合css3 translate3D出血

我在基于Webkit的浏览器上遇到一个问题,如果我向div添加边框半径,然后将-moz-translate3d应用于ul内部(这是因为在原始示例中我使用的是flexslider幻灯片),边界半径不适用并通过容器流血。为了清楚地理解我在说什么,这里有一个关于该问题的fiddle示例。如果我删除translate3d属性,将应用边框半径。HTML:TestTestTestTestCSS:.wrapper{border-radius:20px;position:relative;width:500px;height:200px;overflow:hidden;}.caption{positi

html - webkit边框半径结合css3 translate3D出血

我在基于Webkit的浏览器上遇到一个问题,如果我向div添加边框半径,然后将-moz-translate3d应用于ul内部(这是因为在原始示例中我使用的是flexslider幻灯片),边界半径不适用并通过容器流血。为了清楚地理解我在说什么,这里有一个关于该问题的fiddle示例。如果我删除translate3d属性,将应用边框半径。HTML:TestTestTestTestCSS:.wrapper{border-radius:20px;position:relative;width:500px;height:200px;overflow:hidden;}.caption{positi

android - 输入类型 ="number"的占位符文本未显示在 webkit ICS 中

我有以下输入框Placeholder在除android4.0及以上版本之外的普通浏览器中显示,并且与其他字段相比宽度也有所减小。可能是什么错误? 最佳答案 这是一个knownbug在默认的AndroidWebkit浏览器中。根据thisQuirksModepage,你可以看到许多版本的Android都受此影响。另一方面,ChromeforAndroid则不然。我为此创建了一个简单的JavaScriptshim(修复)。首先,阅读这个问题Howtodisplayplaceholder'stextinHTML5'snumber-type

android - 输入类型 ="number"的占位符文本未显示在 webkit ICS 中

我有以下输入框Placeholder在除android4.0及以上版本之外的普通浏览器中显示,并且与其他字段相比宽度也有所减小。可能是什么错误? 最佳答案 这是一个knownbug在默认的AndroidWebkit浏览器中。根据thisQuirksModepage,你可以看到许多版本的Android都受此影响。另一方面,ChromeforAndroid则不然。我为此创建了一个简单的JavaScriptshim(修复)。首先,阅读这个问题Howtodisplayplaceholder'stextinHTML5'snumber-type

html -::-webkit-input-placeholder 不起作用

这个问题在这里已经有了答案:ConcatenatingnestedclassesusingSASS[duplicate](1个回答)关闭7年前。我正在编写一个移动网站并使用sass对其进行样式设置。我想更改文本输入的占位符颜色,但我做不到。这是占位符的混合@mixinplaceholder($color){::-webkit-input-placeholder{color:$color}:-moz-placeholder{color:$color}::-moz-placeholder{color:$color}:-ms-input-placeholder{color:$color}}然

html -::-webkit-input-placeholder 不起作用

这个问题在这里已经有了答案:ConcatenatingnestedclassesusingSASS[duplicate](1个回答)关闭7年前。我正在编写一个移动网站并使用sass对其进行样式设置。我想更改文本输入的占位符颜色,但我做不到。这是占位符的混合@mixinplaceholder($color){::-webkit-input-placeholder{color:$color}:-moz-placeholder{color:$color}::-moz-placeholder{color:$color}:-ms-input-placeholder{color:$color}}然

html - CSS 使 flex 包裹的元素不超过其 sibling 的宽度

我被拉伸(stretch)flex问题困住了。我有带元素的flexboxdiv。这些元素可以拉伸(stretch)到全宽并具有min-width属性,因此3-4个元素可以适合大屏幕,1-2个元素适合小屏幕。我想让它们的宽度相等,但问题是如果包裹的元素数量少于顶部元素,它们会更宽。附在我当前的结果和预期行为下方。我怎样才能做到?.items{display:flex;justify-content:center;flex-wrap:wrap;width:100%;}.item{min-width:400px;border:1pxsolidblack;margin:0;height:200