html – CSS布局,中间列是固定宽度和定位,两个外部列流体宽度,没有间距

概述我有一个容器元素,必须容纳3个div(或表格单元格或flexbox,或其他).容器是固定尺寸的.让我们说500px宽度,100px高度. 中间div必须是固定宽度,比如100px.它也必须能够通过设置CSS来移动.对于这个例子,假设它固定在距左侧225像素处. 剩下的两个div应该填满每一侧的剩余空间(或者在没有空间的情况下不占用空间,即使中间div移过容器的边界).在侧面div和中间div之间应 我有一个容器元素,必须容纳3个div(或表格单元格或flexBox,或其他).容器是固定尺寸的.让我们说500px宽度,100px高度.

中间div必须是固定宽度,比如100px.它也必须能够通过设置CSS来移动.对于这个例子,假设它固定在距左侧225像素处.

剩下的两个div应该填满每一侧的剩余空间(或者在没有空间的情况下不占用空间,即使中间div移过容器的边界).在侧面div和中间div之间应该没有空间,侧面div和中间div之间也不应该有任何重叠.

所有内在的div都是100％高度(即100px).

container 500x100----------------------------------------------------------------------------|| |-------------------------------| |---------------------| |-------------| |  | |  left,fluID                  | | mIDdle,positioned  | | right,fluID | || |                               | |at 225px,100px wIDth| |             | | | |-------------------------------| |---------------------| |-------------| | ----------------------------------------------------------------------------|

解决方法 曾经听说过 CSS Tables和 calc ??

注意：此解决方案符合CSS3,因此ie8及以下版本不支持此答案!! 总结

以上是内存溢出为你收集整理的html – CSS布局,中间列是固定宽度和定位,两个外部列流体宽度,没有间距全部内容，希望文章能够帮你解决html – CSS布局,中间列是固定宽度和定位,两个外部列流体宽度,没有间距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。