gpt4 book ai didi

html - 具有两列居中固定宽度容器的 CSS 布局;一列固定宽度,第二列延伸到页尾

转载 作者:太空宇宙 更新时间:2023-11-04 14:17:10 24 4
gpt4 key购买 nike

截图如下:

The 960 container is transparent, it is colored just for visual purposes

我唯一的挑战是是否有可能将左侧的列从容器中溢出。这可能吗?容器不会有背景,它只是为了视觉目的。

#container { width: 960px; margin: 0 auto }
#left-column { ??? }
#right-column { width: 200px; float: right }

有关我要实现的目标的更多详细信息,这是另一个屏幕截图:

enter image description here

960 容器的侧面标有蓝绿色标尺。航类的顶部和底部有一个边框,一直向左延伸并扩展到 960 容器之外。

最佳答案

像这样的事情会做到这一点:

<div id="container">
<div id="right-column"></div>
<div id="left-column"></div>
</div>

CSS:

#container { width: 100%; margin: 0 auto; display:inline-table }
#left-column { height:500px; background:#00ff00;width:auto}
#right-column { width: 150px; float: right;height:500px; background:#00ffff }

在这里检查:

http://jsfiddle.net/h9XuQ/

关于html - 具有两列居中固定宽度容器的 CSS 布局;一列固定宽度,第二列延伸到页尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20249423/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com