在CSS中，如何获得一个左侧固定宽度的列，右侧的表使用宽度的其余部分？
所以我试着用纯粹的CSS，从来没有使用表格的布局福音，我真的有。 但是在经历了令人难以置信的痛苦和痛苦之后，我准备放弃。 我愿意努力在CSS中完成一些事情，不要误解我的意思。 但是，如果CSS中完全不可能完成一些布局表中最简单的事情，我不在乎概念纯度是否真的开始遭到殴打。
现在，这可能看起来像我很生气，我是; 我对我浪费的时间感到愤怒，我对QuarkXpress背景下的人感到愤怒，给我无用的固定宽度的devise，我对CSS失败的承诺感到愤怒。 但我并不是要争论， 我真的很想知道一个简单的问题的答案，这个问题将决定我是否再次尝试pure-CSS的东西，或者是否使用它，并在我喜欢的时候使用布局表。 因为我讨厌回到布局表，认为这是不可能的，如果它不是。
问题是这样的：有没有什么办法使用纯CSS的布局，在左侧有一个固定宽度的列，在右侧放置一个数据表，并且让数据表整齐地占据剩余的无论有什么空间？ 也就是说，通过在左侧单元格上具有宽度100％和固定宽度的双单元布局表可以容易地实现相同的布局。
<div style="width: 200px;background-color: #FFFFCC; float: left;"> Left column </div> <div style="margin-left: 200px; background-color: #CCFFFF"> Right column </div> 这应该做到这一点（显然，实施会根据在页面中的位置而有所不同，但我认为这是您正在寻找的概念）。
我想这是你要找的东西：
<table style='width: 100%;'> <tr> <td style='width: 200px;'></td> <td></td> </tr> </table>
晚点再谢我。 = P
（我显然是在开玩笑……有点……）
这是你在找什么？
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>
首先，我会推荐Eric Meyer的CSS书籍以及Web上的CSS参考： A List Apart 。 我在工作中广泛使用CSS，我认为我已经很好用了。
所有这些说：做一些有用的事情。 我经历了你刚刚经历的痛苦。 最后，我认为这是不值得妥协的，只是为了能够说我没有使用表格。
记住：你没有付钱去做CSS，你只能付费写软件。
为了使这个问题保持最新，这里有5种方法可以同时使用CSS2和CSS3。
示例1：浮动和余量
这是多年来的做法：简单而有效。
#example1 .fixedColumn { width: 180px; float: left; background-color: #FCC; padding: 10px; } #example1 .flexibleColumn { margin-left: 200px; background-color: #CFF; padding: 10px; }
<div id="example1"> <div class="fixedColumn"> Fixed Column </div> <div class="flexibleColumn"> Flexible Column </div> </div>
像这样的东西：
<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>
当然，你应该把样式放在一个单独的样式表中而不是内联。 而左边的一个固定宽度的列是相当简单的，但偶尔我会看到其他布局，可以用表格很容易地完成，但据我所知，使用CSS会非常困难。
我喜欢CSS如何使用表格复制一整行代码。
在与CSS战争作斗争之后，我得出结论：“纯粹”在旁观者的眼中，并且已经转移到更多的“让我们用什么”的方法。
使用CSS的好处是：让事情看起来很漂亮。 尽可能使用DIV和SPAN。 但是如果你发现自己花了一天的时间试图把东西排列在所有不同的浏览器风格上，那么在那里拍一张桌子然后继续前进。 不要担心，与大多数人似乎认为的相反，一只小狗实际上不会死亡。
你可能想试试这些：
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
更多HowTOs：
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>
几乎肯定有一个答案，涉及将display：table和display：table-cell应用到所讨论的元素。 也就是说，不。
正如Sparr所说，有CSS特别符合这个要求，因为如果没有各种可能不可接受的妥协，就不可能做到这一点，那就是display:table ， display:table-cell等等。
不幸的是，Internet Explorer 8之前的Internet Explorer不支持这些显示模式，所以问题不在于CSS，而是因为浏览器（实际上是Internet Explorer，其他浏览器都没有问题）的问题才能够充分支持CSS。
好消息是这个正在改变，在适当的时候，我们将有一个适当的CSS解决scheme。 同时，在其他答案中select其中一个妥协。
