使用表格我可以轻松地拥有一列有2列,第1列是可变宽度,第2列是固定宽度(以像素为单位),第1列调整大小以填充可用空间.我正在转换到CSS并想知道如何使用css ...并确保两个div /列保持在同一行并且不包装.
cle*_*tus 22
<!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变得更少.还建议使用重置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%;
}