与表我可以很容易地有一个2列的行,第1列是可变宽度和第2列固定宽度像素和第1列调整大小以填充可用空间。我正在过渡到CSS,并想知道如何用CSS来做到这一点。并确保两个div /列保持在同一行,不包装。css布局固定宽度和可变宽度在同一行
回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
这有一个300像素的右列和一个变量左列。 DOCTYPE仅仅是为了让IE浏览器不太合适。建议使用reset CSS。
显式宽度的浮动几乎是实现这一点的标准方式(由于CSS1/CSS2中的布局有多么有限),您也可以使用内联块,但最终只能做更多工作。不要忘记在父类中包含overflow:hidden和一个触发hasLayout类似宽度的属性。
你能给我一些范例CSS。记住第1列需要调整大小以适应固定宽度列2未使用的空间,并且在页面调整大小时也调整大小,因此两列不能为固定宽度。 – Tuviah 2009-10-18 00:22:58
我假设你在这里需要的是一个2列页面布局。理论上,你可以使用display:table,但是如果你需要支持任何版本的IE,那真的不是一个选项。
这是我们中有些人在从表切换到CSS时遇到的最困难的事情之一,但幸运的是,对于您来说,我们已经这样做了5年多了,我认为您可以为每个问题找到一个解决方案。也许你想查看这篇经典文章:Faux Columns
请不要灰心,CSS在前几个月只是很难,而且之后你可以用一个非常干净,简单,有语义的标准方式。
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
这对我来说非常合适 – Danon 2016-11-25 13:12:02
我明显不明白flexbox足够了,但是我用它并删除了所有期望的显示:flex,它仍然有效! – 2018-02-08 14:16:08
- 1. CSS - 固定宽度布局
- 2. CSS定位固定宽度的布局
- 3. 没有固定宽度的CSS布局
- 4. 三栏的CSS布局 - 固定/最大/可变宽度
- 5. Flex布局流体和固定宽度
- 6. 布局宽度css
- 7. 固定宽度布局,一个孩子横跨全屏宽度
- 8. CSS固定宽度跨度
- 9. Android布局:两个固定宽度视图之间的可变宽度视图
- 10. 自动适合固定宽度布局到屏幕宽度
- 11. 如何使用1170px宽度的bootstrap固定宽度布局?
- 12. 固定宽度和自动宽度的div在一行
- 13. JQuery布局固定宽度关闭时
- 14. 安卓:线性布局固定宽度
- 15. 没有固定宽度的列布局
- 16. 定心固定宽度的布局,同时保持最小宽度滚动
- 17. HTML:固定和可变宽度的TDS
- 18. HTML CSS:固定和拉伸宽度的两列布局
- 19. CSS - 改变固定的宽度来计算的宽度
- 20. YUI pure css固定宽度
- 21. 使用CSS保持固定高度和固定宽度布局中的视频宽高比
- 22. 具有两列居中固定宽度容器的CSS布局;一列固定宽度,延伸到
- 23. 设计表格布局固定和固定宽度列+ colspan
- 24. CSS最小宽度和最大宽度以及灵活布局
- 25. 固定宽度
- 26. 固定宽度
- 27. 固定宽度
- 28. 两个固定宽度区间之间的可变宽度div(最小宽度)
- 29. 固定宽度TextView旁边的可变宽度TextView
- 30. (固定宽度)vs(可变宽度)网站设计
看起来不错,但是左栏必须在右栏之后。这看起来很混乱。也可以这样做,使用绝对位置和权利,如果这样做,是不是比使用浮动和不得不重置浮动更好? – Tuviah 2009-10-18 02:05:31
我对绝对定位的一般经验是,它倾向于产生其他问题(例如changin z-index值,所以绝对元素会浮在菜单上方)。在这种情况下,您可以将右列设置为绝对或相对+绝对值,但经验让我更喜欢浮动,即使元素处于“错误”顺序。我不会过分担心这一点。 – cletus 2009-10-18 02:35:43
这个布局是一个不错的解决方案,但是当你想要在主变量部分使用浮动时,会产生一些问题,特别是当你想使用clear:both; – 2012-08-08 04:28:31