我想要一个两列div布局，每个列的宽度可以是不同的，例如：
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>我希望'view' div在'tree' div填充所需空间后可以扩展到整个可用宽度。
目前，我的'view' div被调整为适应其包含的内容。 如果两个div都占据整个高度，那将更好。
非重复声明：
overflow:hidden。除了 visible 之外的任何 overflow 值都会使其所在的块成为 BFC。BFC 不允许后代浮动元素逃脱，也不允许同级/祖先浮动元素侵入其中。这里的净效果是：浮动的 div 将执行其任务，然后第二个 div 将成为普通块，占据除浮动元素占用的所有可用宽度之外的所有空间。div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}<div>Tree</div>
<div class="second">View</div>我刚刚发现了弹性盒子的神奇之处（display: flex）。试试这个：
<style>
#box {
display: flex;
}
#b {
flex-grow: 100;
border: 1px solid green;
}
</style>
<div id='box'>
<div id='a'>Tree</div>
<div id='b'>View</div>
</div>
Flex盒子让我拥有了15年来一直希望CSS具备的控制能力。它终于来了！更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-grow: 100; 而不是 flex-grow: 1;？ - Yevgeniy Afanasyevflex-grow:10，然后将 #b 设为 flex-grow:90，这样 #a 的宽度就是该行宽度的10％，#b 的宽度就是该行宽度的90％。如果没有其他元素具有 flex 宽度样式，那么你放置的内容在技术上并不重要。 - B TUse the CSS Flexbox flex-grow property to fill the remaining space.
html, body {
height: 100%;
}
body {
display: flex;
}
.second {
flex-grow: 1;
}<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>这是一个使用表格容易实现但使用CSS很难（如果不是不可能的话，至少在跨浏览器方面）的好例子。
如果两列都是固定宽度，那么这很容易。
如果其中一列是固定宽度，则会稍微困难一些，但完全可行。
对于两列都是可变宽度的情况，我认为需要使用双列表格。
display:none;在移动设备上进行更改。尽可能地使其100％响应式，有时为了更好地利用触摸屏幕感觉和按钮样式，在移动设备上完全更改设计会更好。 - Bysandercalc:
.leftSide {
float: left;
width: 50px;
background-color: green;
}
.rightSide {
float: left;
width: calc(100% - 50px);
background-color: red;
}<div style="width:200px">
<div class="leftSide">a</div>
<div class="rightSide">b</div>
</div>这种方法的问题在于，所有的宽度都必须明确定义，要么是一个值（px和em可行），要么是相对于另一些已经被明确定义的东西的百分比。
看看这个解决方案
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.content {
background-color: red;
height: 200px;
width: auto;
margin-left: 200px;
}
.item {
width: 25%;
background-color: blue;
float: left;
color: white;
}
.clearfix {
clear: both;
}<div class="container">
<div class="clearfix"></div>
<div class="sidebar">width: 200px</div>
<div class="content">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
</div>
</div><html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="clear" />
</div>
</body>
</html>我不明白为什么人们愿意花费如此之多的精力来寻找纯CSS解决方案，而这些问题使用旧的TABLE标签非常容易解决。
所有浏览器仍然具有表格布局逻辑... 或许你可以称呼我为恐龙，但我认为让它帮助你更好。
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
<tr>
<td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
<td bgcolor="#F0F0F0">View</td>
</tr>
</table>media-queries将两列放在同一行，使用旧的table标签是不可能的。要让它起作用，您需要应用CSS表格样式。因此，在现今，如果您想要适应任何屏幕大小的响应式布局，最好使用CSS来解决这个问题。 - ElChiniNet<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="right">View</div>
<div style="width: <=100% getTreeWidth()100 %>">Tree</div>
<div class="clear" />
</div>
<div class="ColumnWrapper">
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
</div>
</body>
</html>