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

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

这就是你的吗？正在寻找？

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 3

我想这就是您要找的：

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

稍后谢谢我。 =P

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

Answer 4

为了使这个问题保持最新状态，这里有 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

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 网格使 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：

2 列（1 固定，1 弯曲）5 种不同的方式！

Answer 5

首先，我推荐 Eric Meyer 的 CSS 书籍以及网络上的 CSS 参考：分开列表。 我在工作中广泛使用 CSS，并且我认为我已经非常擅长使用它了。

综上所述：做有效的事情。 你刚才所经历的痛苦我也经历过。 最后，我认为仅仅为了说我没有使用表格而牺牲我的设计是不值得的。

请记住：付钱给你不是为了做 CSS - 你是为了编写工作软件而付钱的。

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

您可能想尝试这些：

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto< /a>

原因如下：

http://en.wikipedia.org/wiki/Tableless_web_design

< a href="http://davespicks.com/essays/notables.html" rel="nofollow noreferrer">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>

Answer 8

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

在经历了 CSS 战争之后，我得出的结论是“纯粹”是情人眼里出西施，并且已经转向更多的“让我们只使用有效的”方法。

使用 CSS 的好处是：让东西看起来更漂亮。 尽可能使用 DIV 和 SPAN。 但是，如果您发现自己花了一天的时间试图让所有不同的浏览器风格之间的内容保持一致，那么就在那里放一张桌子并继续前进。 别担心，与大多数人的想法相反，小狗实际上不会死。

Answer 9

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