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

Question

提问by chaos

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 impossiblein 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 wayusing 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% 且左侧单元格宽度固定的两个单元格布局表可以轻松实现相同的布局？

Answer 1

回答by Derek H

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

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

Answer 2

回答by Paolo Bergantino

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

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

Answer 3

回答by Scott Muc

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

Answer 4

回答by Mark Brittingham

First, I'd recommend Eric Meyer's CSS books as well as theCSS 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书以及在：网络上的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 付费的——而是为编写可工作的软件付费的。

Answer 5

回答by Chris Spittles

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

示例 1：浮动和保证金

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();

示例 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()尽管对某些版本的 android 浏览器的支持有点不稳定，但可以从 IE9 开始工作：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

示例 3：CSS 显示为表格

#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

示例 4：CSS3 弹性盒

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

示例 5：CSS3 网格

At the moment the only browsers to support an implementation of CSS3's gridare 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 实现的唯一浏览器grid是 IE10、IE11 和 Edge（因此是-ms-浏览器前缀），因此请确保在其中一个浏览器中查看，否则将无法正常工作。

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

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

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

Answer 6

回答by Jobo

You might want to try these:

你可能想试试这些：

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

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

Here's why:

原因如下：

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

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

More HowTOs:

更多操作方法：

    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>

Answer 7

回答by David Z

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

Answer 8

回答by NotMe

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。但是，如果您发现自己花了一天的时间试图让所有不同的浏览器风格都保持一致，那么请在那里打一张桌子并继续前进。别担心，与大多数人似乎认为的相反，小狗实际上不会死。

Answer 9

回答by Sparr

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 应用于相关元素。也就是说……不。

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

提问by chaos

回答by Derek H

回答by Paolo Bergantino

回答by Scott Muc

回答by Mark Brittingham

回答by Chris Spittles

Example 1: Floats & Margin

示例 1：浮动和保证金

Example 2: CSS calc();

示例 2：CSS calc();

Example 3: CSS Display as Table

示例 3：CSS 显示为表格

Example 4: CSS3 Flexbox

示例 4：CSS3 弹性盒

Example 5: CSS3 Grid

示例 5：CSS3 网格

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

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

回答by Jobo

回答by David Z

回答by NotMe

回答by Sparr

相关推荐

最近更新

标签

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

提问by chaos

回答by Derek H

回答by Paolo Bergantino

回答by Scott Muc

回答by Mark Brittingham

回答by Chris Spittles

Example 1: Floats & Margin

示例 1：浮动和保证金

Example 2: CSS calc();

示例 2：CSS calc();

Example 3: CSS Display as Table

示例 3：CSS 显示为表格

Example 4: CSS3 Flexbox

示例 4：CSS3 弹性盒

Example 5: CSS3 Grid

示例 5：CSS3 网格

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

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

回答by Jobo

回答by David Z

回答by NotMe

回答by Sparr

相关推荐

html <input> 元素忽略 CSS left+right 属性？

Html 如何使用 CSS 设置只读属性的样式？

Html 如何使 div 不大于其内容？

Html 使用 Eclipse IDE 开发 HTML5 应用程序

相关推荐

最近更新

标签