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

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

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

问题是：有没有办法使用纯CSS布局在左侧有一个固定宽度的列，并在其右侧放置一个数据表，然后让数据表整齐地占据剩余的可用空间？也就是说，同样的布局是很容易实现的，只要有一个宽度为100%的两单元格布局表，并且在左侧单元格上有一个固定的宽度？

就是您想要的

正文{
保证金：0；
填充：0；
边界：0；
溢出：隐藏；
身高：100%；
最大高度：100%；
}
#框架内容{
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：200px；
/*帧div的宽度*/
身高：100%；
溢出：隐藏；
/*禁用滚动条。设置为“滚动”以启用*/
背景：海军；
颜色：白色；
}
#主要内容{
位置：固定；
排名：0；
左：200px；
/*将左值设置为WidthOfFrameDiv*/
右：0；
底部：0；
溢出：自动；
背景：#fff；
}
.内管{
利润率：15px；
/*每个DIV内的内部DIV的边距（提供填充）*/
}
*html正文{
/*IE6黑客*/
填充：0 200px；
/*将值设置为（0 WidthOfFrameDiv）*/
}
*html#主要内容{
/*IE6黑客*/
身高：100%；
宽度：100%；
}

CSS左框布局
这里是示例文本
动态驱动器CSS库
学分：

类似这样的内容：

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

几乎可以肯定，有一个答案涉及到将display:table和display:table cell应用于所讨论的元素。也就是说。。。不。

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

在经历了CSS之战之后，我得出了一个结论，“纯粹”是旁观者眼中的东西，并转向了更多的“让我们只使用有用的东西”方法

---

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

首先，我推荐Eric Meyer的CSS书籍以及web上的CSS参考：。我在工作中广泛使用CSS，我认为我已经很好地使用了它

所有这些都是这么说的：做有效的。我经历了你刚刚经历的痛苦。最后，我觉得仅仅为了说我没有使用过桌子而牺牲我的设计是不值得的

---

记住：你不是为做CSS而付钱的——你是为写工作软件而付钱的

我想这就是你想要的：

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

以后谢谢我=P

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

左列
右栏

---

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

您可能希望尝试以下方法：

原因如下：

更多指南：

    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>

div.row{
明确：两者皆有；
填充顶部：10px；
}
div.row span.label{
浮动：左；
宽度：100px；
文本对齐：右对齐；
}
div.row span.formw{
浮动：对；
宽度：335px；
文本对齐：左对齐；
}
姓名：
年龄：
鞋码：
评论：
继续写点东西。。。

为了让这个问题保持最新，这里有5种方法可以同时使用CSS2和CSS3实现相同的功能

---

示例1：浮动和保证金 这是多年来的做法：简单有效

#示例1.固定列{
宽度：180px；
浮动：左；
背景色：#FCC；
填充：10px；
}
#示例1.柔性柱{
左边距：200px；
背景色：#CFF；
填充：10px；
}

固定柱
柔性柱

；）类似于我的一个问题：+1作为一个聪明的*ss-oops，我的意思是意识到你应该先做有效的事情，然后再考虑代码的纯度。如果你错过了交付日期，那么让你的CSS代码变得漂亮是没有意义的。您好，2015年开始-1不够

    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>