当前位置 : 主页 > 网页制作 > css >

css浮动并排div高度100%

来源:互联网 收集:自由互联 发布时间:2021-06-13
我不知道如何在没有照片的情况下问这个问题.我有两个div,并排,在另一个带有填充和边距的div中.这就是我想要实现的目标: +-------------------------------------------------------------------+-------
我不知道如何在没有照片的情况下问这个问题.我有两个div,并排,在另一个带有填充和边距的div中.这就是我想要实现的目标:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

但这就是我得到的.我能够浮动div并补偿边距等,但是我不能让div C延伸到A的整个高度.A和B都没有固定的高度,所以如何让C扩展到A的全高?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

A的高度被B的高度拉伸.它也是一个完全流畅的布局,因此宽度也不固定.基本上,我需要C来扩展A的整个高度.

我尝试了所有的高度,但我无法让它工作,因为高度不固定:(

A基本上只是一个div包装器,没有填充,没有边距.
B实际上由两个带有边距和填充的div组成,float:left;
C只是一个div,float:right;

编辑:
我也需要支持IE,没有CSS黑客攻击

网上有很多关于CSS相等列高的文章.我通常使用的解决方案是使用jQuery来计算所有列的最大高度,然后使用jQuery将所有列的高度设置为相同的东西.我通常手动执行此操作,但有一些插件可以完成任务.

如果由于纯粹的视觉原因,列需要具有相同的高度,您可以在列上创建背景图像,以产生相同高度的错觉.这并不总是有效,取决于您的设计,但我过去曾使用它.

网友评论