gpt4 book ai didi

CSS:居中,左侧流动,右侧固定,具有最小/最大宽度的源有序布局

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:54 27 4
gpt4 key购买 nike

<分区>

标题说明了这一点。我想要一个 2 列的 CSS 布局:

  • 居中 - 主要内容在页面上居中
  • 具有固定(像素)的右列宽度
  • 具有流畅的左列 - 用尽所有可用空间减去右列宽度
  • 按源顺序排列 - 在 HTML 源中,左栏内容在右栏内容之前
  • 允许最小宽度 - 在我的示例中为 760px
  • 允许最大宽度 - 在我的示例中为 1024px

如果窗口大于最大宽度,内容将在页面的最大值处居中。如果窗口小于最大宽度,内容将 100% 填充页面,除非它小于最小宽度,这会使水平滚动条出现。

我愿意使用一些小的 javascript 来处理不支持这些属性的浏览器的最小/最大宽度(我正在看你的 IE6),但我同样愿意让那部分布局降级。

表格非常简单。我已经浏览了数百个示例布局,但没有什么可以完成我要问的所有事情,尽管有几个很接近。问题似乎是以相同的样式获得流畅的左列和源排序。我发现了几个具有正确源顺序的左固定/右流动(与我想要的相反)的示例,或者没有源顺序的左流动/右固定的示例,但不是两者兼而有之。

我不关心它是使用 float 还是负边距,但我想避免绝对定位。

+---------------------------------------+
| |
| +---------------------------+-----+ |
| |fluid |fixed| |
| | | | |
| | | | |
| +---------------------------+-----+ |
| |
+---------------------------------------+

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