css布局固定宽度和可变宽度在同一行

与表我可以很容易地有一个2列的行，第1列是可变宽度和第2列固定宽度像素和第1列调整大小以填充可用空间。我正在过渡到CSS，并想知道如何用CSS来做到这一点。并确保两个div /列保持在同一行，不包装。css布局固定宽度和可变宽度在同一行

2009-10-17 Tuviah

<!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。

来源

2009-10-18 00:44:52 cletus

看起来不错，但是左栏必须在右栏之后。这看起来很混乱。也可以这样做，使用绝对位置和权利，如果这样做，是不是比使用浮动和不得不重置浮动更好？ – 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

显式宽度的浮动几乎是实现这一点的标准方式（由于CSS1/CSS2中的布局有多么有限），您也可以使用内联块，但最终只能做更多工作。不要忘记在父类中包含overflow：hidden和一个触发hasLayout类似宽度的属性。

来源

2009-10-18 00:04:40

你能给我一些范例CSS。记住第1列需要调整大小以适应固定宽度列2未使用的空间，并且在页面调整大小时也调整大小，因此两列不能为固定宽度。 – Tuviah 2009-10-18 00:22:58

我假设你在这里需要的是一个2列页面布局。理论上，你可以使用display：table，但是如果你需要支持任何版本的IE，那真的不是一个选项。

这是我们中有些人在从表切换到CSS时遇到的最困难的事情之一，但幸运的是，对于您来说，我们已经这样做了5年多了，我认为您可以为每个问题找到一个解决方案。也许你想查看这篇经典文章：Faux Columns

请不要灰心，CSS在前几个月只是很难，而且之后你可以用一个非常干净，简单，有语义的标准方式。

来源

2009-10-18 07:34:24 Soska

此工具很容易帮助generate liquid fixed columns。

来源

2009-12-19 15:55:08 unigg

这是很好的，因为它是纯粹的CSS，很容易看到发生了什么 – Danon 2016-11-25 13:13:11

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%; 
}

Browser support check here.

来源

2015-10-04 13:10:34 Rax

这对我来说非常合适 – Danon 2016-11-25 13:12:02

我明显不明白flexbox足够了，但是我用它并删除了所有期望的显示：flex，它仍然有效！ – 2018-02-08 14:16:08

css布局固定宽度和可变宽度在同一行

回答

相关问题