Html css布局固定宽度和可变宽度在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1583548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css layout fixed width and variable width on same line
提问by Tuviah
with tables I can easily have a row with 2 columns, column 1 is variable width and column 2 fixed width in pixels and column 1 resizes to fill the available space. I'm transitioning to css and wondering how to do this with css..and make sure that both divs/columns stay on the same line and don't wrap.
对于表格，我可以轻松地拥有 2 列的行，第 1 列是可变宽度，第 2 列是固定宽度（以像素为单位），第 1 列调整大小以填充可用空间。我正在过渡到 css 并想知道如何使用 css.. 并确保两个 div/列保持在同一行并且不换行。
回答by cletus
<!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>
This has a right column of 300 pixels and a variable left column. The DOCTYPE is just there to make IE misbehave less. Also use of a reset CSSis recommended.
它有一个 300 像素的右列和一个可变的左列。DOCTYPE 只是为了减少 IE 的不当行为。还建议使用重置 CSS。
回答by unigg
This tool helps to generate liquid fixed columnseasily.
该工具有助于轻松生成液体固定柱。
回答by Rax
HTML
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
回答by meder omuraliev
Floats with explicit widths are pretty much the standard way to achieve this nowadays ( due to how limited layout is in CSS1/CSS2 ) , you can also use inline-block but it would just end up being more work. Don't forget to contain the floats on the parent with overflow:hidden and a property that triggers hasLayout like width.
具有显式宽度的浮点数现在几乎是实现这一目标的标准方法（由于 CSS1/CSS2 中的布局有限），您也可以使用内联块，但最终只会增加工作量。不要忘记使用overflow:hidden 和一个触发hasLayout 的属性（如宽度）来包含父对象上的浮动。
回答by Soska
I'm assuming that what you need here is a 2-columns page layout. In theory, you could use display:table but if you need to support any version of IE, thats not really an option.
我假设您在这里需要的是 2 列页面布局。理论上，您可以使用 display:table 但如果您需要支持任何版本的 IE，那不是一个真正的选择。
This is one of the hardest things some of us encountered when switching from tables to CSS, but fortunately for you, we've been doing this for more than 5 years and I think you can fine a solution for every problem. Maybe you want to check this classic article: Faux Columns
这是我们中的一些人在从表格切换到 CSS 时遇到的最困难的事情之一，但对您来说幸运的是，我们已经这样做了 5 年多，我认为您可以为每个问题找到一个解决方案。也许您想查看这篇经典文章：Faux Columns
Please, don't feel discouraged, CSS is only hard the first months, and after that you'll be able to layout anything in a very clean, simple, semantic and standard way.
请不要气馁，CSS 只是前几个月很难，之后您将能够以非常干净、简单、语义和标准的方式布局任何东西。
