当前位置:  开发笔记 > 编程语言 > 正文

使用CSS将一行div设置为相同的高度

如何解决《使用CSS将一行div设置为相同的高度》经验,为你挑选了1个好方法。

我有一行div必须都是相同的高度,但我无法知道这个高度可能提前(内容来自外部源).我最初尝试将div放在一个封闭的div中并将它们向左浮动.然后我将它们的高度设置为"100%",但这没有明显的效果.通过将封闭div上的高度设置为固定高度,我可以将浮动的div扩展,但只能达到容器的固定高度.当其中一个div中的内容超过固定高度时,溢出; 浮动的divs拒绝扩张.

我用Google搜索了这个浮动的div-of-the-height-problem问题,显然没有办法用CSS做到这一点.所以现在我试图使用相对和绝对定位的组合而不是浮点数.这是CSS:


这是HTML的简化版本:

   
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

这是有效的,除非你将min-height更改为类似于5em(展示内容超出最小高度时会发生什么),并且你可以看到,虽然文本没有被截断,但div仍然拒绝扩展.现在我输了.有没有办法用CSS做到这一点?



1> Andrew Hare..:

这是一个你可以陷入理想主义或现实之间的时刻.我理解,出于格式化的原因,将非表格数据放在表格中没有语义价值,但是我不希望看到你向后弯腰以便为这个问题创建一个非表格式的解决方案,仅仅是为了它自己.

我是第一个击落非语义设计的人,相信我,但有时你需要面对CSS +语义标记不适用于所有设计场景的事实.我不知道这个网站的可访问性需求,但我建议你寻找一个更实际的解决方案来解决这个问题.

欢呼你以正确的方式接近这个并寻找解决它的正确方法!不幸的是,这是CSS的黑暗角落之一(以及块内的垂直定位)​​,如果没有虚拟列,javascript或表格单元格,这是不可能的.

无论您选择哪种,请不要为了自己的利益而遵守标准.

推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有