我试图按照“不使用表格进行布局”的纯CSS规范来工作，但经历了难以置信的痛苦和煎熬之后，我几乎要放弃了。我愿意在CSS中付出努力去实现一些东西，不要误解我。但是当似乎可以使用布局表格完成的一些最简单的事情，在CSS中却完全不可能时，概念的纯度就不再那么重要。
现在，你可能会觉得我很生气，我确实很生气；我对浪费时间感到愤怒，我对QuarkXpress背景下的人们给我提供无用的固定宽度设计感到愤怒，我对CSS的失败承诺感到愤怒。但我并不想开始争论；我真的想知道一个简单的问题的答案，这将决定我是否再次尝试使用纯CSS，或者放弃纯CSS而随时使用布局表格。因为如果这个问题实际上不是不可能的话，我会很遗憾回到布局表格。
问题是这样的：有没有使用纯CSS布局的方法，可以在左边放一个固定宽度的列，并在其右侧放置一个数据表，并使数据表整齐地占据可用空间的其余部分？也就是说，通过使用宽度为100％的二个单元格布局表格并在左侧单元格上设置固定宽度来轻松实现的相同布局，纯CSS是否也能够实现？
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>
<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>
那应该就可以了（显然，实现方式会根据它在页面中的位置而有所不同，但我想这就是你要找的概念）。
margin-left: 200px，而是可以应用 overflow: hidden，这将创建一个新的渲染上下文，这意味着它不会围绕左列进行换行。优点是左列的宽度可以更改，而无需调整右列的边距以匹配它。 - Andrew Vit这是您正在寻找的吗？这里
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
/*Width of frame div*/
height: 100%;
overflow: hidden;
/*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent {
position: fixed;
top: 0;
left: 200px;
/*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube {
margin: 15px;
/*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
/*IE6 hack*/
padding: 0 0 0 200px;
/*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
/*IE6 hack*/
height: 100%;
width: 100%;
}<div id="framecontent">
<div class="innertube">
<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</p>
</div>
</div>我理解你的痛苦，但不要认为这是浪费时间。我相信你现在对CSS掌握得更好了。继续努力学习，你会开始看到优势。个人而言，我发现CSS需要大量实践才能熟练掌握。我已经使用基于CSS的布局5年了，每天仍在学习有趣的技巧。
我认为这就是你在寻找的：
<table style='width: 100%;'>
<tr>
<td style='width: 200px;'></td>
<td></td>
</tr>
</table>
晚点感谢我 =P
(显然我在开玩笑…有点儿…)
为了使这个问题保持最新状态，以下是5种使用CSS2和CSS3实现相同效果的方法。
多年来一直使用这种简单而有效的方法。
#example1 .fixedColumn {
width: 180px;
float: left;
background: #FCC;
padding: 10px;
}
#example1 .flexibleColumn {
margin-left: 200px;
background: #CFF;
padding: 10px;
}<div id="example1">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>calc() 可在IE9及以上版本中使用，但某些Android浏览器的支持程度有些不稳定：http://caniuse.com/#feat=calc
#example2.calc {
overflow: hidden;
}
#example2.calc .fixedColumn {
width: 180px;
float: left;
background: #FCC;
padding: 10px;
}
#example2.calc .flexibleColumn {
width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
float: left;
background: #CFF;
padding: 10px;
}<div id="example2" class="calc">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>#example3.table {
display: table;
width: 100%;
}
#example3.table .fixedColumn {
width: 180px;
display: table-cell;
background: #FCC;
padding: 10px;
}
#example3.table .flexibleColumn {
display: table-cell;
background: #CFF;
padding: 10px;
}<div id="example3" class="table">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>Flexbox在各种浏览器中拥有出乎意料的良好支持：http://caniuse.com/#search=flex
#example4.flex {
display: flex;
}
#example4.flex .fixedColumn {
width: 180px;
background: #FCC;
padding: 10px;
}
#example4.flex .flexibleColumn {
flex: 1 100%;
flex-basis: auto;
background: #CFF;
padding: 10px;
}<div id="example4" class="flex">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>CSS网格使得在CSS中创建复杂的布局变得直观且容易。
http://caniuse.com/#search=grid
#example5.grid {
display: grid;
grid-template-columns: 200px 1fr;
}
#example5.grid .fixedColumn {
grid-column: 1;
background: #FCC;
padding: 10px;
}
#example5.grid .flexibleColumn {
grid-column: 2;
background: #CFF;
padding: 10px;
}<div id="example5" class="grid">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>以下是展示所有5种技术的Codepen：
类似这样：
<div style="position: relative; width: 100%">
<div style="position: absolute; left: 0; top: 0; width: 200px">
left column
</div>
<div style="position: absolute; left: 200px; top: 0">
other stuff
</div>
</div>
你可能想尝试这些：
http://www.alistapart.com/stories/practicalcss/
http://www.w3.org/2002/03/csslayout-howto
这是为什么：http://en.wikipedia.org/wiki/Tableless_web_design
http://davespicks.com/essays/notables.html
更多实用指南：
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 335px;
text-align: left;
}
<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<form>
<div class="row">
<span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>
<div class="spacer">
</div>
</form>
</div>
我喜欢CSS仍然需要整整一页的代码来复制使用表格的几行代码。
在与CSS的战斗中，我得出结论：“纯粹”是观察者的眼中钉，我已经转向更多的“让我们只使用有效的方法”的方法。
在适当的情况下使用CSS：使事物看起来漂亮。尽可能使用DIV和SPAN。但是，如果你发现自己花了一整天的时间来让所有不同的浏览器版本正确对齐，那么就加入一个表格并继续前进。别担心，与大多数人认为的相反，小狗实际上不会死。