在 CSS 中，如何获得一个左侧固定宽度的列和一个使用其余宽度的右侧表格？

Posted 2023-03-06

【中文标题】在 CSS 中，如何获得一个左侧固定宽度的列和一个使用其余宽度的右侧表格？

【英文标题】：In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?

【发布时间】：2010-10-02 20:30:02

【问题描述】：

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

现在，我似乎很生气，而且我很生气；我对我浪费的时间感到愤怒，我对那些从 QuarkXpress 背景出来的人给我无用的固定宽度设计感到愤怒，我对 CSS 的失败承诺感到愤怒。但我并不是要开始争论。我真的很想知道一个简单问题的答案，这个问题将决定我是再尝试一下纯 CSS 的东西还是把它混为一谈，并在我喜欢的时候使用布局表。因为我不想回到布局表，认为这件事如果不是真的是不可能的。

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

【问题讨论】：

giveupandusetables.com ;)

类似于我的一个问题：***.com/questions/551180/…

【参考方案1】：

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

【讨论】：

是的。谢谢你。 :) 不要误会我的意思，我不是反 CSS，而且我比与我一起工作的许多人更早采用它。我看到了优点。只需要习惯偶尔不得不做一些非常不直观的事情来获得结果，比如在你的链接中。 :)

伙计，即使这样也有问题。准确地说，是语义的；它要求内容列在标记中的左列之前，因此对于屏幕阅读器来说是无序的。

但这是 CSS 中的一个缺陷。只要有足够的时间就可以学会掌握它，这一事实并不能改变这一点。对比Java学习GridBagLayout（大概半天不到）

请在答案中包含相关信息。外部资源可能会更改或脱机。

这是一种非常有礼貌的说法 CSS SUCKS！

【参考方案2】：

类似这样的：

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

【讨论】：

不。右列获得最小可能宽度，数据表继承该宽度。将右列宽度设置为 100% 使其具有显示区域的整个宽度。不好。

另外 - 如果页面上有任何内容，则外部 div 的高度需要固定并溢出：滚动/自动/隐藏

【参考方案3】：

几乎可以肯定有一个答案涉及将 display:table 和 display:table-cell 应用于相关元素。也就是说……不。

【参考方案4】：

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

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

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

【讨论】：

事实上，如果我浪费一天时间试图让 CSS 正常工作，我可能会出去杀了一只小狗，然后再回到桌子上。所以我建议坚持你喜欢的方式并以这种方式拯救小狗。

【参考方案5】：

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

话虽如此：做有效的事。我已经完全经历了你刚刚经历的痛苦。最后，我认为仅仅为了能够说我没有使用过桌子而妥协我的设计是不值得的。

请记住：编写 CSS 并没有报酬 - 编写工作软件是有报酬的。

【讨论】：

@Mark Brittingham：关于“A List Apart”。你的意思是 alistapart.com/topics/design/typography 还是 alistapart.com/topics/code/css ？你能推荐一些特别的东西吗？

Peter - A List Apart 上的文章通常可读性很强，所以我会在那里浏览，寻找我很少在其他网站上这样做的宝石。但是，如果您正在寻找特定的东西，他们确实有能力在网站上进行搜索。建议？嗯，Ethan Marcotte 的“Fluid Grids”对于 CSS 极客 (alistapart.com/articles/fluidgrids) 来说是一篇很好的（且具有挑战性的）文章。如果你做了很多网页设计工作，那么如果你阅读 Kevin Potts 的“重要的细节”（alistapart.com/articles/the-details-that-matter），你会成为一个更好的设计师。怎么开始？

【参考方案6】：

我想这就是你要找的东西：

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

稍后谢谢我。 =P

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

【讨论】：

+1 聪明的 *ss - 哎呀，我的意思是意识到你应该首先做有效的事情，然后考虑代码的纯度。如果你错过了交付日期，那么让你的代码变得 CSS-beautiful 是没有意义的。

您好，从 2015 年开始！ -1 没有足够的 CSS ;) 也许你可以更新你的答案并利用它的高位？

【参考方案7】：

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

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

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

【讨论】：

啊，漂亮。在 Scott Muc 的链接和这个之间，似乎涵盖了所有场合。

非常有趣 - 我猜第二个 div 的左边距不需要，因为它是按顺序排列的下一个 div。也许这也是我所缺少的……我要去试试！

是的，左边距是我缺少的链接。我基本上需要的是一种表达“宽度：100%-200px”的方式。显然，margin-left 就是你这么说的。有点。

请记住，当页面变得复杂时，浮动会变得难以管理。顺便说一句，使用表格进行页面布局并没有错。

您可以应用overflow: hidden，而不是右列上的margin-left: 200px，它会创建一个新的渲染上下文，这意味着它不会环绕左列。优点是左列宽度可以改变，而无需调整右列的边距以匹配它。

【参考方案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

更多 HowTO：

    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>

【参考方案9】：

为了让这个问题保持最新状态，这里有 5 种方法可以让您同时使用 CSS2 和 CSS3 来实现相同的目标。

---

示例 1：浮动和保证金

这是多年来的做法：简单而有效。

#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>

---

示例 2：CSS calc();

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>

---

示例 3：CSS 显示为表格

#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>

---

示例 4：CSS3 弹性盒

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>

---

示例 5：CSS3 网格

CSS Grid 让 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 种技术的代码笔：

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