标签: css-float
我的DIV元素发生了什么？
我有这么简单的代码:
HTML:
<body>
<div id="red"> ABC </div>
<div id="blue"> ABC </div>
</body>
CSS:
body{
width: 300px;
}
#red{
float:left;
width: 100px;
height: 100px;
background-color: red;
}
#blue{
height: 100px;
background-color: blue;
}
我看到旁边的红色方形和蓝色.
但是,如果我添加行"width:100px;" 在#blue中,一切都毁了:"ABC"跳"一条线向下,没有蓝色背景.为什么？
推荐指数
解决办法
查看次数
将div拉伸到具有固定宽度的div
我有2个div内联.其中一个有固定的宽度.我希望div在窗口调整时填充所有空间,直到第二个div.要澄清情况,请看下面的图片:
调整窗口大小后,我需要获得下一个布局:
这该怎么做？
推荐指数
解决办法
查看次数
父元素不跟随子元素
当我们设置父元素,并递增子元素的内容时,父母的大小是否应该自动缩放以适合孩子？
相反,已应用css属性的父级(例如给定的背景)不会缩放父级.这是我尝试创建3列简单布局,并且父级没有缩放,因此未应用边框底部:
正如您所看到的,内容溢出了父级,并且所有内容都未包含在父级中.我该怎么解决这个问题？
推荐指数
解决办法
查看次数
CSS如何在不使用浮点数的情况下在同一行上对齐两个DIV
这必须是可能的!
我已经阅读了本网站上发布的数十个问题以及盲目搜索Google.我在容器内有一个容器DIV和两个DIV.我希望容器内的所有东西都居中,但容器内的两个DIV彼此相邻.
我看到实现这一目标的唯一方法是将两个DIV浮动到容器内.但是,如果我漂浮他们,那么我不能让他们居中.并且通过居中我的意思是我希望左侧DIV的右边界接触(或几乎触碰)右侧DIV的左边界.
有人请教育我!我发誓,我会回到桌子!我没有发布任何代码,因为我没有任何代码
感谢任何能帮助我的人!
推荐指数
解决办法
查看次数
保证金与浮动元素一起崩溃,为什么会增加额外保证金？
更新:Firefox上不显示以下行为.
让我们从以下情况开始:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}<div></div>身体用a定义,min-height:100vh我们有一个滚动条,让我们可以看到html.在这里我们有一个保证金塌陷,的边缘div被折叠与机身保证金,从而创造了身体和滚动条后,这个空间.
如果我们参考规范,我们就有这种情况:
当且仅当以下情况时,两个边距相邻:
...
如果父项具有"自动"计算高度,则最后一个流入子项的下边距和其父项的下边距
这div是最后一个流入元素,body并且高度自动,因为我们只指定了最小高度.
现在让我们添加更多可能受此边际影响的元素,并保持边距折叠规则.唯一的方法是添加浮动元素以保持我们div始终是最后一个in-flow元素.
这是新代码:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}
.l { …推荐指数
解决办法
查看次数