CSS：居中、左侧流体、右侧固定、具有最小/最大宽度的源排序布局
标题说的是。我想要一个 2 列 CSS 布局：
- 居中 - 主要内容在页面上居中
- 具有固定（像素）的右列宽度
- 具有流动的左列 - 占用所有可用空间减去右列宽度
- 是源排序的 - HTML 源代码中左列内容位于右列内容之前
- 允许最小宽度 - 在我的示例中为 760px
- 允许最大宽度 - 在我的示例中为 1024px
如果窗口大于最大宽度，则内容将居中于页面处于最大值。如果窗口小于最大宽度，则内容将填充页面的 100%，除非它小于最小宽度，否则会出现水平滚动条。
我愿意使用一些小的 javascript 来处理不支持这些属性的浏览器的最小/最大宽度（我正在看你 IE6），但我也愿意让布局的这一部分降级。
表格非常简单。我已经浏览了数百个示例布局，没有任何东西可以完成我所要求的所有事情，尽管有几个布局很接近。问题似乎在于以相同的风格获得流畅的左栏和源排序。我发现了几个具有正确源顺序的固定左/流体右（与我想要的相反）的示例，或没有源顺序的流体左/固定右的示例，但不是两者兼而有之。
我不在乎它是否使用浮动或负边距，但我想避免绝对定位。
+---------------------------------------+
| |
| +---------------------------+-----+ |
| |fluid |fixed| |
| | | | |
| | | | |
| +---------------------------+-----+ |
| |
+---------------------------------------+
The titles says it. I want a 2-column CSS layout that:
- is centered - the main content is centered on the page
- has a fixed (pixel) right column width
- has a fluid left column - uses up all available space minus the right column width
- is source ordered - the left column content comes before the right column content in the HTML source
- allows for a minimum width - 760px in my example
- allows for a maximum width - 1024px in my example
If the window is greater than max width, the content will be centered on the page at the max value. If the window is smaller than max width, the content fills 100% of the page, unless it's smaller than min width which would make the horizontal scrollbar appear.
I'm willing to use some minor javascript to handle the min/max width for browsers which don't support those properties (I'm looking at you IE6), but I'm just as willing to let that part of the layout degrade.
It is drop dead simple with tables. I've looked through literally hundreds of example layouts, and nothing can do all of the things I'm asking, though there are several that come close. The problem seems to be getting a fluid left column and source ordering in the same style. I've found several examples of a fixed left/fluid right (opposite of what I want) with proper source order, or fluid left/fixed right without source ordering, but not both.
I don't care if it uses floats or negative margins, but I'd like to avoid absolute positioning.
+---------------------------------------+
| |
| +---------------------------+-----+ |
| |fluid |fixed| |
| | | | |
| | | | |
| +---------------------------+-----+ |
| |
+---------------------------------------+
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我强烈建议您查看Dynamic Drive 上的 CSS 模板。第 5 个应该就是您要寻找的（流体固定）。只需将
max-width和min-width添加到主容器元素即可。仅供参考，这些模板非常适合用作页面布局的基础。使用 CSS 是学习很多关于浮动和定位的好方法，它对我早期的 Web 开发确实有帮助。
I highly recommend checking out The CSS templates at Dynamic Drive. The 5th one down should be what you're looking for (Fluid-Fixed). Just add a
max-widthandmin-widthto the main container element and you should be all set.FYI, these are really good templates to use as a base for your page layouts. Playing with the CSS is a great way to learn a lot about floats and positioning, and it really helped me out in my early days of web development.
我的尝试：
http://www.ryankinal.com/fluid/
它并不完全有效，尽管这是只是因为在非常小的窗口尺寸下，我的负边距可能会导致内容从页面上脱落。理论如下：
因此，右栏越大，内容就越有可能脱落。但这是我在一个小时左右的时间里所得到的最接近的结果。由于将右列包装在无关的 div 中并利用了溢出：可见，因此它也有点 hackish。
但他们是我的公爵（目前）。
My attempt:
http://www.ryankinal.com/fluid/
It doesn't completely work, though that's only because at very small window sizes, my negative margins can cause the content to fall off the page. Here's the theory:
So, the larger the right column, the more likely it is that the content will fall off. But that's as close as I've gotten in a good hour or so. It's also a little hackish due to wrapping the right column in an extraneous div and taking advantage of overflow: visible.
But them's my dukes (for now).
您在寻找这样的东西吗？ （负边距 + 浮动 + 正确的源顺序 + 固定右侧）
http://blog.html.it /layoutgala/LayoutGala23.html
更多布局请参见索引页：http://blog.html。 it/layoutgala/
然后只需将最小/最大宽度附加到容器中。
Are you looking for something like this? ( negative margins + floats + proper source order + fixed right )
http://blog.html.it/layoutgala/LayoutGala23.html
More layouts at the index page: http://blog.html.it/layoutgala/
And then just append min/max width to the container.