在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

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

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

晚点再谢我.= P

(我显然在开玩笑......有点......)

Answer 3

是这你在找什么？

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

为了使这个问题保持最新，这里有 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()尽管对某些版本的 android 浏览器的支持有点不稳定，但可以从 IE9 开始工作：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 列（1 固定，1 弯曲） 5 种不同的方式！