Question

使用表我可以很容易地拥有一列有2列，第1列是可变宽度，列2是固定宽度（以像素为单位），第1列调整大小以填充可用空间。我正在转换到css并想知道如何使用css ...并确保两个div /列保持在同一行并且不会换行。

Answer 1

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

Answer 2

此工具可轻松帮助generate liquid fixed columns。

Answer 3

<强> 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.

Answer 4

具有显式宽度的浮动几乎是当今实现这一目标的标准方法（由于CSS1 / CSS2中的布局有限），您也可以使用内联块，但它最终会成为更多的工作。不要忘记在overflow上隐藏包含浮动的浮点数：隐藏和触发hasLayout类似宽度的属性。

Answer 5

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

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

请不要感到沮丧，CSS在前几个月才变得艰难，之后你将能够以一种非常简洁，语义和标准的方式布局任何东西。

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

5 个答案: