如何使只使用CSS和HTML(无JS)三个栏布局等高
三个栏布局等高
回答
最简单的方法具有相同高度三个栏布局是使用faux column background technique。
您还可以尝试给与三个divs大底部垫与巨大的底部边缘与容器与overflow: hidden
。尽管如此,它并不能很好地与内联锚相媲美。
<html><body>
<div>
<div style="float:left;height: 33.33%;width:10%;background-color:red">zdfsfs</div>
<div style="float:left;height: 33.33%;width:10%;background-color:blue">zgfsgsgfsgf</div>
<div style="float:left;height: 33.33%;width:10%;background-color:cyan">zvgzcxgvxz</div>
</div></body></html>
但是当内容随机增加会发生什么 – thecodeparadox 2011-04-07 06:00:19
我给了小width.you可以增加width.and仍然内容较大,那么内容会出div,这种解决方案将无法正常工作。我会尽力找到它的解决方案,并让我知道如果我得到它。 – Poonam 2011-04-07 06:15:30
谢谢。但我认为我所接受的'alex'给出的解决方案更好。尝试这个。 – thecodeparadox 2011-04-07 06:24:30
div {display : table-cell;}
这可能是另一种解决问题的办法! 欲了解更多信息,请参阅此链接:Is there a disadvantage of using `display:table-cell`on divs?
- 1. HTML,三个栏布局
- 2. CSS3/HTML5三栏布局
- 3. CSS三栏布局 - 清浮
- 4. CSS三个栏布局响应
- 5. 等高行高的表格布局
- 6. 创建三栏馈送布局
- 7. SEO友好的三栏布局
- 8. 三列100%高度的CSS布局
- 9. 如何使用CSS变换三个栏布局分为两个栏布局和两成一个
- 10. 如何使用自动布局布局三个项目水平相等
- 11. 等高栏 - CSS
- 12. 三个div使布局
- 13. 两列,等高布局 - 列间空格
- 14. 3列布局需要高度相等
- 15. Android布局等宽和高度
- 16. 表格布局中的等高行
- 17. 布局 - 中心等布局
- 18. 布局,布局大,布局正常等
- 19. CSS两个栏布局宽
- 20. 三columnm布局左侧多个div和右栏
- 21. 中心位置固定的三个栏布局
- 22. 布局等待
- 23. CSS三列布局
- 24. css三列布局
- 25. Layout_weight得到2个相等的高度布局
- 26. 导航栏布局
- 27. CSS 3栏布局
- 28. 等高为2列布局,但每行高度不同
- 29. 高度相等的div(两个栏)
- 30. 创建三个字段集的布局
thanks.I'v试过这个并且工作。但有什么更好的主意? – thecodeparadox 2011-04-07 05:48:55
@abdullah不好意思,对不起。如果你不需要支持
alex
2011-04-07 05:55:39
以前是better.coz,我必须支持ie7 + – thecodeparadox 2011-04-07 06:02:40