示例1：浮子和放大器余量

Question

所以我尝试使用纯CSS，永不使用表格换布局福音，我真的有。但在经历了令人难以置信的痛苦和痛苦之后，我只是准备放弃了。我愿意付出一些努力来完成CSS中的事情，不要误会我的意思。但是当看起来像布局表中可以完成的一些非常简单的事情在CSS中完全不可能时，我不在乎概念纯度真的开始受到打击。

现在，看起来我很生气，而且我很生气。我对我浪费的时间感到生气，我很生气从QuarkXpress背景中走出来的人给我带来无用的固定宽度设计，我对CSS失败的承诺感到生气。但我不是想开始争论;我真的想知道一个简单问题的答案，这个问题将决定我是否会再尝试使用纯CSS的东西，或者在我想要的时候使用布局表。因为我讨厌回到布局表，认为这件事是不可能的，如果它实际上不是。

问题是：是否使用纯CSS布局在左侧有一个固定宽度的列，在它右边放置一个数据表，数据表是否整齐地占用了可用空间的剩余部分？也就是说，通过在左侧单元格上设置宽度为100％且固定宽度的双单元布局表，可以轻松实现相同的布局？

Answer 1

<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

应该这样做（显然实现会根据页面的位置而有所不同，但我认为这是你正在寻找的概念）。

Answer 2

我认为这就是你要找的东西：

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

稍后谢谢我。 = P

（我显然是在开玩笑......有点......）

Answer 3

this您要找的是什么？

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年了，而且我每天都在学习有趣的技巧。

Answer 4

首先，我推荐Eric Meyer的CSS书籍以及网上的 CSS参考：A List Apart。我在工作中广泛使用CSS，我觉得我已经很好用了。

所有这一切都说：做有用的。我经历过你刚刚经历过的痛苦。最后，我认为只是为了能够说我没有使用过桌子而不值得妥协我的设计。

请记住：您没有报酬做CSS - 您需要付费才能编写工作软件。

Answer 5

为了使这个问题保持最新，以下是使用CSS2和CSS3实现同样功能的5种方法。

示例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>

示例2：CSS calc（）;

calc()从IE9向上工作，虽然对某些版本的android浏览器的支持有点不对劲：http://caniuse.com/#feat=calc

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background-color: #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-color: #CFF;
    padding: 10px;
}

<div id="example2" class="calc">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

示例3：CSS显示为表

#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background-color: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background-color: #CFF;
    padding: 10px;  
}

<div id="example3" class="table">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

示例4：CSS3 Flexbox

Flexbox在各种浏览器中都有出色的支持：http://caniuse.com/#search=flex

#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background-color: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background-color: #CFF;
    padding: 10px; 
}

<div id="example4" class="flex">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

示例5：CSS3网格

目前支持CSS3 grid实现的唯一浏览器是IE10，IE11和Edge（因此-ms-浏览器前缀），所以请确保您在其中一个中查看此内容，否则它赢了工作正常。

编辑我已在此处添加了Chrome实验规范，您可以通过在Chrome中启用详细here的实验性功能来查看。

http://caniuse.com/#search=grid

#example5.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
}
#example5.grid .fixedColumn {
    -ms-grid-column: 1;
    background-color: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    -ms-grid-column: 2;
    background-color: #CFF;
    padding: 10px;
}

<div id="example5" class="grid">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

这是一个包含所有5种技术的codepen：

2 Columns (1 Fixed, 1 Flexed) 5 different ways!

Answer 6

这样的事情：

<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非常困难。

Answer 7

我喜欢CSS仍然需要整页代码才能复制几行使用表格。

在与CSS战争作斗争之后，我得出的结论是“纯粹”在旁观者的眼中，并且已经转向更多的“让我们只使用有效的方法”。

使用CSS有利于它：让事物看起来很漂亮。尽可能使用DIV和SPAN。但是如果你发现自己花了一天的时间尝试在所有不同的浏览器风格中排队，那么就把一张桌子放在那里继续前进。别担心，与大多数人的想法相反，小狗实际上不会死。

Answer 8

您可能想尝试这些：

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">
          &nbsp;
        </div>
      </form>
    </div>

Answer 9

几乎可以肯定答案涉及将display：table和display：table-cell应用于相关元素。这就是说......不。

Answer 10

正如Sparr所说，有专门满足这一要求的CSS，因为如果没有各种可能不可接受的妥协，并且display:table，display:table-cell等等，它实际上不可能以任何其他方式实现。 / p>

不幸的是，Internet Explorer 8之前的Internet Explorer不支持这些显示模式，所以问题不在于CSS，而是因为浏览器（实际上是Internet Explorer，其他都很好）无法充分支持CSS。

好消息是，这种情况正在发生变化，并且在适当的时候，我们将拥有一个合适的CSS解决方案。与此同时，在其他答案中选择一个妥协方案。

在CSS中，如何获得左侧固定宽度列，右侧表使用宽度的其余部分？

10 个答案:

示例1：浮子和放大器余量

示例2：CSS calc（）;

示例3：CSS显示为表

示例4：CSS3 Flexbox

示例5：CSS3网格

2 Columns (1 Fixed, 1 Flexed) 5 different ways!