草庐IT

sidebar-left

全部标签

html - float :right following float:left? 的标准行为是什么

假设有这样的HTML标签:​Text1Text2​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​css样式是:​#s1{float:left;}#s2{float:right;}显示的标准行为是什么?在某些浏览器中,我看到了Text1Text2在某些版本的IE中,我看到了Text1Text2似乎float:right跨度被下推到下一行。 最佳答案 现代浏览器会正确计算收缩包裹的float的宽度并使它们位于同一行,前提是float的宽度不超过父元素的宽度。我相信这是渲染的正确行为。I

html - 无法覆盖文本对齐 : justify with text-align: left in simple HTML

我有一个奇怪的问题,即text-align:left在元素继承了justify属性后不起作用。我什至尝试使用!important关键字,但它仍然无法正常工作。奇怪的是,如果我在Chrome中使用开发者模式,它说text-align:left是事件的,text-align:justify是不活动,但它不呈现左对齐。这是我的代码:https://jsfiddle.net/h0vx9sLc/3/(用“修复”更新了Fiddle)body{width:100px;}p:nth-child(1){}p:nth-child(2){text-align:justify;}p>span{text-ali

html - 如何在不使用 float :left so it wont change the default parent div height 的情况下将文本对齐到 img 的右侧

如何将文本与示例图片中的图像图标的右侧对齐。我通常会使用“float:left”,但它用于移动响应设计,所以我不喜欢使用“float:left”之类的东西,因为它会破坏红色div响应式设计的高度。我必须对齐标题、副标题和一个小方形图像。 最佳答案 很容易使用float:left并且不会打破红色边框div的高度。您只需将display:table-cell添加到.app_topblock。这是解决方案:.app_top{display:table-cell;}.app_topimg{float:left;}查看工作示例。Here'st

css - HTML 和 CSS : 2 DIVS on left, 右侧 1 个独立的 DIV

我没有找到我这个具体案例的答案,所以我决定问一个新问题。我想在页面左侧有2个DIV(具有固定宽度),在右侧有一个DIV,占据页面宽度的其余部分。此外,右侧的单个DIV应具有其独立的高度(当其高度增加时,不应影响左侧DIV的高度或位置)。像这样的东西就是我想要的:这是HTML代码:Div1Div3Div2这是我现在拥有的CSS:div.div1{float:left;height:400px;margin-right:10px;width:200px;}div.div3{height:425px;overflow:hidden;}div.div2{clear:left;float:lef

html - 为什么 'clear:left' 也正确清除?

我一直在努力让CSSfloat工作(在我的脑海中)。注意下面的例子:div.container{width:500px;}div.left{float:left;clear:left;}div.right{float:right;}leftdata1leftdata2rightdata1rightdata2rightdata3rightdata4这将给出以下输出:+--------------------------------------------------------------------+|leftdata1||leftdata2rightdata1rightdata2ri

CSS:如果垂直空间可用,则为 "float:bottom"。 "float:left"否则

我有两个非常窄(宽度:400像素)的div,如果浏览器窗口中有足够的垂直空间,它们应该垂直堆叠。如果浏览器高度太小,而右边有足够的空间,“bottomdiv”应该float到topdiv的右边。从某种意义上说,我要求的是“float:left”的反义词。float:如果浏览器窗口中有足够的水平空间,则水平左对齐div,如果下方只有可用空间,则仅将divfloat在其他下方。感谢您的任何建议! 最佳答案 根据您需要的浏览器支持级别,一个简单的媒体查询可能会解决您的问题:/*SETTHEDEFAULTRULESFORSHORTSCREE

html - padding-left 和 padding-start 有什么区别?

在检查一些代码时,我发现了这个新声明:-webkit-padding-start但我无法理解与现有的padding-left有什么区别属性(property)。我已经阅读了MozillaDevelopers上的页面并创建了一个fiddle,但我仍然不确定。 最佳答案 除了-webkit-padding-start是非标准的,不同之处在于当书写方向是从右到左时,-webkit-padding-start将填充放在右(有效地,转换为padding-right)。如果该属性是标准化的,它将对旨在用于包含不同书写系统文本的文档的样式表很有用

html - 如何在不破坏包含元素高度的情况下在 div 中使用 "float: left"?

float的HTML元素似乎不会扩展其容器的高度。例如,考虑以下代码:.portfoliosite{background:#777;padding:10px;width:550px;}.portfoliothumbnail{background:red;margin:010px10px0;float:left;height:150px;width:150px;}AwesomeSite.ComAnawesomesiteIdid.ItlaunchedonJan1,2009请注意灰色背景的包含div比红色div短,并且红色div延伸到容器边界之外。我希望包含元素扩展到其内容的大小,包括flo

html - 溢出(滚动)以使用负 `left` 和 `top` 定位元素

允许可滚动溢出的元素从左侧和顶部负向定位的解决方法是什么?赞hereinexample(jsFiddle),只有3个红色方block可见,并且未切换滚动。虽然有6个正方形,但其中3个位于顶部的负方向。 最佳答案 我能想到的唯一方法是将正方形包裹在一个与它们高度相同的div中,并使用JQuery的scrollTop()方法:http://www.w3schools.com/jquery/css_scrolltop.asp但这也会在包装器div下面强制设置一个水平滚动条...简短的回答:没有纯CSS解决方案,并且定位它们绝对避免了此解决

html - Firefox 中的 Padding Left 怪癖

http://jsfiddle.net/hERrX/input{padding:1%;}input#checking{padding-left:40px;}请在FIREFOX中检查以上链接并帮助我解决问题。它似乎在Chrome中运行良好。padding-left似乎不起作用,即使它具有更高的优先级。 最佳答案 如果您不使用%长度,它会起作用:http://jsfiddle.net/hERrX/15/input{padding:5px;}input#checking{padding-left:40px}我不知道为什么它不适用于%..我