在CSS中，如何获得左侧固定宽度列以及使用其余宽度的右侧表?

So I've tried to work with the pure-CSS, never-use-tables-for-layout gospel, I really have. But after an incredible amount of pain and anguish, I'm just about ready to give up. I'm willing to go to some effort to accomplish things in CSS, don't get me wrong. But when it seems like some of the most asininely simple things that can be done with layout tables are utterly impossible in CSS, I don't care if conceptual purity really starts to take a beating.

所以我试着使用纯css的，从未用过的表格式的福音，我真的有。但在经历了难以置信的痛苦之后，我几乎要放弃了。我愿意努力在CSS中完成一些事情，不要误会我的意思。但是，当一些最简单的东西在CSS中看起来是完全不可能完成的时候，我不关心概念的纯洁性是否真的开始受到打击。

Now, it probably seems like I'm angry, and I am; I'm angry about my wasted time, I'm angry about people coming out of QuarkXpress backgrounds handing me useless fixed-width designs, I'm angry about the failed promise of CSS. But I'm not trying to start an argument; I really do want to know the answer to one simple question that will determine whether I give the pure-CSS thing another try or lump it and use layout tables whenever I feel like it. Because I'd hate to go back to layout tables thinking that this thing is impossible if it's actually not.

现在，看起来我很生气，我是;我对我浪费的时间感到愤怒，我对人们从QuarkXpress的背景中出来给我无用的固定宽度设计感到愤怒，我对CSS失败的承诺感到愤怒。但我并不是要开始争论;我真的很想知道一个简单问题的答案，这个问题将决定我是给纯css的东西再试一次，还是把它混在一起，然后在我喜欢的时候使用布局表。因为我不愿意回到布局表中去想如果它不是的话，这是不可能的。

The question is this: is there any way using pure-CSS layout to have a column on the left, which is fixed-width, and to the right of it place a data table, and have the data table neatly take up the remainder of whatever space is available? That is, the same layout which is easily achievable by having a two-cell layout table with width 100% and a fixed width on the left cell?

问题是:是否有办法使用纯css布局在左边有一个固定宽度的列，在它的右边放置一个数据表，让数据表巧妙地占据所有可用空间的剩余部分?也就是说，同样的布局可以通过在左侧单元格上设置一个宽度为100%的双单元格布局表来实现吗?

10 个解决方案

#1

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

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

That should do it (obviously implementation will vary based on where it is in the page, but I think that's the concept you're looking for).

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

#2

I think this is what you're looking for:

我想这就是你要找的:

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

Thank me later. =P

感谢我。= P

(I'm obviously joking.... kind of...)

(我显然开玩笑....种……)

#3

Is this what you're looking for?

这就是你要找的吗?

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>

I feel your pain, but try not to look at it as time wasted. I'm sure you have a much better grasp of CSS than you previously did. Keep working with it and you'll start seeing the advantages. I personally have found CSS to be one of those things that takes a lot of practice to become proficient in. I've been using CSS based layouts for 5 years and I still learning interesting tricks everyday.

我能感觉到你的痛苦，但不要把它看成是浪费时间。我相信您比以前更熟悉CSS。继续使用它，你会发现它的好处。我个人认为CSS是需要大量实践才能精通的东西之一。我使用基于CSS的布局已经有5年了，我仍然每天学习有趣的技巧。

#4

First, I'd recommend Eric Meyer's CSS books as well as the CSS reference on the web: A List Apart. I use CSS extensively in my work and I think that I have gotten pretty good with it.

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

With all of that being said: do what works. I have been through exactly the pain that you've just experienced. In the end, I figured that it wasn't worth compromising my design just to be able to say that I hadn't used tables.

说了这么多，你就去做吧。我经历了你刚刚经历的痛苦。最后，我意识到，仅仅说我没有使用过表格，并不值得牺牲我的设计。

Remember: you aren't paid to do CSS - you are paid to write working software.

记住:做CSS不是你的工作，而是你的工作软件。

#5

To keep this question up-to-date, here are 5 ways you can achieve the same thing using both CSS2 and CSS3.

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

---

 

 

Example 1: Floats & Margin

This is the way it's been done for years: Simple and effective.

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

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

---

 

 

Example 2: CSS calc();

calc() works from IE9 upwards although support on some versions of android's browser is a little flakey: http://caniuse.com/#feat=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>

---

 

 

Example 3: CSS Display as Table

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

---

 

 

Example 4: CSS3 Flexbox

Flexbox has surprisingly good support across browsers: http://caniuse.com/#search=flex

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>

---

 

 

Example 5: CSS3 Grid

At the moment the only browsers to support an implementation of CSS3's grid are IE10, IE11 and Edge (hence the -ms- browser prefixes) so make sure you view this in one of those otherwise it won't work correctly.

目前，支持CSS3网格实现的浏览器只有IE10、IE11和Edge(因此有-ms- browser前缀)，所以请确保您在其中一个浏览器中查看，否则它将无法正常工作。

EDIT I've included the chrome experimental spec here which you can view by enabling the experimental features in Chrome which is detailed here.

编辑我已经在这里包括了chrome的实验规范，你可以通过在这里详细介绍的chrome的实验特性来查看。

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

http://caniuse.com/搜索=网格

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

Here's a codepen that features all 5 techniques:

下面是一个包含所有5种技术的代码页:

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

#6

Something like this:

是这样的:

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

Of course, you should probably put the styles in a separate stylesheet rather than inline. And a single fixed-width column on the left is fairly simple, but occasionally I do see other layouts which can be done easily with tables but are, as far as I know, fiendishly difficult with CSS.

当然，您应该将样式放在单独的样式表中，而不是内联。左边的一个固定宽度的列相当简单，但是我偶尔也会看到其他的布局，这些布局可以很容易地用表格完成，但是就我所知，CSS很难做到。

#7

I love how CSS still takes a full page of code to duplicate a couple lines of using a table.

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

After fighting the CSS war, I've come to the conclusion that "pure" is in the eye of the beholder and have moved to more of a "let's just use what works" approach.

在与CSS之战的战斗之后，我得出了这样的结论:“纯”在旁观者的眼中，并且已经转向了“让我们用有效的方法”。

Use CSS on what it's good for: making things look pretty. Use DIV's and SPAN's when you can. But if you find yourself spending a day trying to get things to line up right across all the different browser flavors, then slap a table in there and move on. Don't worry, contrary to what most people seem to think, a puppy will in fact not die.

使用CSS对它的好处:使事物看起来漂亮。尽可能使用DIV和SPAN。但是，如果你发现自己花了一整天的时间试图让事情在所有不同的浏览器中都能找到合适的位置，那就在上面打个表，然后继续前进。别担心，与大多数人的想法相反，小狗其实不会死。

#8

You might want to try these:

你可能想试试这些:

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

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

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

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

Here's why:

原因如下:

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

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

http://davespicks.com/essays/notables.html

http://davespicks.com/essays/notables.html

More HowTOs:

更多的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

There is almost certainly an answer that involves applying display:table and display:table-cell to the elements in question. Which is to say... no.

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

#10

As Sparr says, there's CSS that specifically meets this requirement, because it's not really possible to do it any other way without various, possibly unacceptable compromises, and that's display:table, display:table-cell, etc.

正如Sparr所言，有专门满足这个需求的CSS，因为如果没有各种、可能无法接受的折衷，就不可能以任何其他方式实现，这就是display:table、display:table-cell，等等。

Unfortunately Internet Explorer prior to Internet Explorer 8 doesn't support these display modes, so the problem is not really with CSS but with a failure of browsers (actually Internet Explorer, the others are fine) to support CSS adequately.

不幸的是，Internet Explorer 8之前不支持这些显示模式，所以问题不在于CSS，而在于浏览器(实际上是Internet Explorer)不能充分支持CSS。

The good news is that this is changing, and in due course, we will have a proper CSS solution. In the meantime, pick one of the compromises in the other answers.

好消息是，这种情况正在改变，在适当的时候，我们将有一个合适的CSS解决方案。同时，在其他答案中选择一个折衷方案。