标签: css-float
你如何让浮动元素的父母崩溃？
尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.
你怎么解决这个问题？
我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.
解决方案1
浮动父母.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？
解决方案2
给父母一个明确的高度.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.
解决方案3
在父元素中添加"spacer"元素,如下所示:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div …推荐指数
解决办法
查看次数
如何在另一个div内对齐3个div(左/中/右)？
我希望在容器div中对齐3个div,如下所示:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设置宽度),并且在调整容器大小后中心div应保持在中心.
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
有小费吗？
推荐指数
解决办法
查看次数
如何将浮动元素居中？
我正在实施分页,它需要集中.问题是链接需要显示为块,因此需要浮动它们.但是,text-align: center;对他们不起作用.我可以通过给左边的包装div填充来实现它,但是每个页面都有不同的页面数,所以这不起作用.这是我的代码:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->为了得到这个想法,我想要的是:
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
向左飘浮; vs display:inline; vs display:inline-block; vs display:table-cell;
我的问题
这些方法中的任何一种都是专业网页设计师的首选吗？
在绘制网站时,这些方法中的任何一种都是通过网络浏览器进行优化的吗？
这只是个人偏好吗？
还有其他我缺少的技术吗？
注意:以上问题涉及设计多列布局
向左飘浮;
这是我在创建列布局时总是使用的方法,它似乎工作得很好.虽然父母确实崩溃了,所以你只需要记住clear:both;以后.另一个骗子,我只是发现无法垂直对齐文本.
显示:内联;
这似乎纠正了折叠父级的问题,但增加了空格.
从html中删除空格似乎是最容易解决这个问题的方法,但如果你对你的html非常挑剔则不需要.
显示:内联块;
似乎表现得很像display:inline;.
显示:表细胞;
工作完美.
我的想法:
我确定我错过了很多东西,比如某些例外情况会破坏布局,但display:table-cell;似乎效果最好,我想我会开始更换,float:left;因为我似乎总是陷入困境clear:both;.我在网上看过很多关于这个的文章和博客,但没有一个能给我一个明确的答案,说明我在设置我的网站时应该使用什么.
推荐指数
解决办法
查看次数
如何使用CSS并排浮动3个div？
我知道如何让2个div并排浮动,只需向左浮动一个,向右浮动另一个.
但是如何使用3个div进行此操作还是应该只为此目的使用表格？
推荐指数
解决办法
查看次数
div中的浮动元素浮动在div之外.为什么？
假设你有一个div,说你把它涂成绿色并给它一个明确的宽度,当我把东西放进去时,在我的情况下是一个img和另一个div.这个想法是容器div的内容将导致容器div伸展出来,并成为内容的背景.但是当我这样做时,包含的div缩小以适应非浮动对象,并且浮动对象将要么一直出来,要么是一半,一半,并且与大div的大小没有任何关系.
为什么是这样？有没有我缺少的东西,我怎样才能获得浮动的物品来拉伸包含div的高度？
推荐指数
解决办法
查看次数
CSS浮动 - 如何将它们保持在一条线上？
我希望在同一行上有两个项目,左边的项目使用'float:left'.
单凭这一点我没有任何问题.问题是,即使你非常小的浏览器调整大小,我希望这两个项目保持在同一行.你知道......就像桌子一样.
无论如何,目标是保持右边的物品不被包裹.
那么如何告诉浏览器使用css我宁愿拉伸包含div而不是包装它以便float: leftdiv 在div之下div？
例如:我想要的:
\
+---------------+ +------------------------/
| float: left; | | float: right; \
| | | /
| | |content stretching \ Screen Edge
| | |the div off the screen / <---
+---------------+ +------------------------\
/
推荐指数
解决办法
查看次数
如果包含浮动元素,为什么容器元素的高度不会增加？
我想问一下高度和浮子的工作原理.我有一个外部div和一个内部div,里面有内容.它的高度可能会根据内部div的内容而有所不同,但似乎我的内部div会溢出它的外部div.这样做的正确方法是什么？
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right"></div>
</div>
</body>
</html>推荐指数
解决办法
查看次数
如何创建网格/平铺视图？
例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:
.article{
width:100px;
height:100px;
background:#333;
float:left;
margin:5px;
}
该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.
而我想这样的观点:
推荐指数
解决办法
查看次数
标签 统计
css ×10
css-float ×10
html ×5
alignment ×1
center ×1
clearfix ×1
css-tables ×1
css3 ×1
flexbox ×1
grid ×1
layout ×1
positioning ×1
stretching ×1
tiles ×1