当前位置：theitroad>Html CSS 流体列，固定边距；圣杯的圣杯

Html CSS 流体列，固定边距；圣杯的圣杯

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/7190768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 10:16:41 　来源:igfitidea点击:

CSS fluid columns, fixed margins; the holy grail of holy grails

htmlcssfluid-layout

提问by Dan Lugg

Update & Summary

更新与总结

I feel obligated to make this question clearer, now that there is a bounty attached.

我觉得有义务让这个问题更清楚，现在有悬赏。

(Also, I'm pretty sure this will be child's play when the calc()CSS3 unit value is supported, doing something like width: calc(25% - 5px); though we'll probably be browsing the internet in our minds by that point)

（另外，我很确定当calc()支持 CSS3 单位值时，这将是儿戏，做类似的事情width: calc(25% - 5px)；尽管到那时我们可能会在脑海中浏览互联网）

I'm working on a CSS framework for a few projects that share design requirements; namely a fluid 12 column layout. Using floated .columnelements with percentage widths of (100% / 12) x col_size, this is reasonably easy. However, the issue comes with the addition of fixed margins (or any form of spacing) between columns.

我正在为一些共享设计要求的项目开发 CSS 框架；即流畅的 12 列布局。使用.column百分比宽度为 的浮动元素(100% / 12) x col_size，这相当容易。但是，问题在于在列之间添加了固定边距（或任何形式的间距）。

My initial attempt used the fluid columns as described, with a .panelchild nested in each. HTML/CSS snippet follows (reduced for brevity):

我最初的尝试使用了所描述的流体柱.panel，每个柱子中都嵌套了一个孩子。HTML/CSS 片段如下（为简洁起见减少）：

.column{
    float: left;
    display: inline-block;
}

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

.panel{
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* so padding doesn't increase width */
}

<div class="column width-02">
    <div class="panel">Width-02</div>
</div>
<div class="column width-03">
    <div class="panel">Width-03</div>
</div>
<div class="column width-02">
    <div class="panel">Width-02</div>
</div>
<div class="column width-05">
    <div class="panel">Width-05</div>
</div>

This snippet would produce a layout similar to that of the image below, however all .panelelements have 5pxpadding on all sides. I'm trying to make the content edge of the outside columns flush with the edge of the view-port (or parent container for that matter). Another approach would be to eliminate the .panelclass altogether, and just go with columns:

此代码段将生成类似于下图的布局，但是所有.panel元素的5px所有边都有填充。我试图使外列的内容边缘与视口（或父容器）的边缘齐平。另一种方法是.panel完全消除类，只使用列：

.column{
    float: left;
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
}

.column:first-child{ padding-left: 0px; }

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>

Again, this works well, producing results even closer to that of the image below, however now the (actual) problem is that the padding is eating into the width of the columns screwing up the width distribution. The :first-childcolumn has 10 pixels (or whatever the margin size is) greater content area width than it's siblings.

同样，这很有效，产生的结果甚至更接近下图的结果，但是现在（实际）问题是填充正在侵蚀列的宽度，从而弄乱了宽度分布。该:first-child列的内容区域宽度比它的兄弟列大 10 个像素（或任何边距大小）。

This may seem innocuous, even unnoticeable; however there are a few instances where having exact(as exact as possible) width distribution between elements is either necessary, or would make things altogether easier.

这可能看起来无害，甚至不引人注意；然而，在某些情况下，元素之间具有精确（尽可能精确）的宽度分布是必要的，或者会使事情变得更容易。

And so, whether using padding, margin, or some combination thereof; is there any solution for fluid columns, fixed margins, with even distributionof gutter space that won't rob "marginal" (***haha*) content area from the adjacent columns?**

因此，无论是使用填充、边距还是它们的某种组合；是否有针对流体列、固定边距、均匀分布的排水沟空间不会从相邻列中抢夺“边际”（***哈哈*）内容区域的解决方案？**

Original Question

原始问题

Due to the simple lack of results in my searches and attempts, I've concluded this is impossible. If anywhere can yield an answer though, I'm certain it is here.

由于在我的搜索和尝试中简单地缺乏结果，我得出结论这是不可能的。如果任何地方都可以产生答案，我相信它就在这里。

Is there any way, using pure CSS, to achieve a fluid width columned layout with fixed width margins?

有什么方法可以使用纯 CSS 来实现具有固定宽度边距的流体宽度列式布局？

Important note: This figure is only an example, and not the specific layout I'm looking to achieve. A given solution should permit any combination of adjacent columns, the total width distribution totaling 12 or less. Consider the popular 960 gridfor reference.)

重要说明：此图只是一个示例，并不是我想要实现的特定布局。给定的解决方案应允许相邻列的任意组合，总宽度分布总计 12 或更少。考虑流行的960 网格以供参考。）

super_awesome_layout.css
Note: In a 12 column layout, the width distribution of the columns in the image are 2, 3, 2, and 5 respectively.

super_awesome_layout.css
注意：在12列布局中，图像中列的宽度分布分别为2、3、2和5。

So far, I've resorted to a grid that, using percentages, nearlyaccomplishes this. The problem is, in order to achieve the margins, each column requires an additional child (I call them .panel) with:

到目前为止，我已经求助于使用百分比的网格，几乎可以实现这一点。问题是，为了实现边距，每列都需要一个额外的子项（我称之为.panel）：

width: 100%;
box-sizing: border-box;
padding: 10px;

This is, again nearly, fine; the issue is with this approach is that the first and last column have outer "margins" (10px) and the "margins" between each column are doubled (2 x 10px)

这再次几乎没问题；这种方法的问题在于第一列和最后一列具有外部“边距”（10px），并且每列之间的“边距”加倍（2 x 10px）

Certainly, with the inclusion of the new CSS3 calc()value type, this could be solved much more easily. Something in the direction of:

当然，通过包含新的 CSS3calc()值类型，这可以更容易地解决。朝着以下方向的东西：

.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
    width: calc(75% - 10px);
    margin: ...;
}

I've got some Javascript fixes, I've hacked out some stuff that "works", but I'm on a quest. Hopefully the holiest of grails exists.

我有一些 Javascript 修复程序，我已经破解了一些“有效”的东西，但我正在寻找。希望最神圣的圣杯存在。

The following solution, and the one @avall provided (although certainly a good choice on simplifying) unfortunately aren't what I'm looking for. The main issue being, the margins are not distributed evenly among columns.

不幸的是，以下解决方案和@avall 提供的解决方案（尽管在简化方面确实是一个不错的选择）并不是我想要的。主要问题是，边距在列之间分布不均匀。

The only way I can see this working is reducing the .panelpadding to 5pxand something like:

我能看到这项工作的唯一方法是将.panel填充减少到5px类似以下内容：

.column:first-child > .panel {
    padding-left: 0px;
}

.column:last-child > .panel {
    padding-right: 0px;
}

/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
    padding-right: 0px;
    padding-left: 0px;
}

This solution is not acceptable, only because IE8 fails to recognize the :last-child(and for that matter :only-child) pseudo selectors.

这个解决方案是不可接受的，只是因为 IE8 无法识别:last-child（以及就此而言:only-child）伪选择器。

回答by

I finally figured out. After into the hundreds of hours wasted on and off over the last decade (though I'm relying on some css that wouldn't have worked year ago anyway). I solved it without any gotchas. and in IE8+.

我终于想通了。在过去十年中断断续续地浪费了数百个小时之后（尽管我依赖于一些一年前无论如何都行不通的 css）。我在没有任何问题的情况下解决了它。并在 IE8+ 中。

Please prepare the 2001: A Space Odyssey Music because I'm landing this boat.

请准备 2001: A Space Odyssey 音乐，因为我要登上这艘船。

The genius and trick to this method is in using inline-block elements and then using word-spacing to counterbalance using a negative right margin. A negative right margin on it's own will pull elements together, allowing you to have 100% width set and still fit things in between, but leave the elements overlapping. Setting negative margin on the parent just undoes the child margin in regards to the effect on interacting with total width (the magic "100% width" mark we're trying to hit"). Padding only serves to increase the size of the element its on and is useless with regards to counter-acting margin. It is often used with box-sizing in the jury rigged solutions to this problem, at the expense of losing the ability to use padding at all otherwise (and margin) and likely requiring more wrapper elements.

这种方法的天才和技巧是使用内联块元素，然后使用字间距来平衡使用负右边距。负的右边距本身会将元素拉到一起，允许您设置 100% 的宽度并仍然适合它们之间的内容，但让元素重叠。在父级上设置负边距只会撤销子级边距对与总宽度交互的影响（我们试图达到的神奇“100% 宽度”标记）。填充仅用于增加其元素的大小在反作用余量方面并且是无用的。它通常在陪审团操纵解决这个问题的解决方案中与 box-sizing 一起使用，代价是完全失去使用填充的能力（和余量）并且可能需要更多包装元素。

word-spacing provides the magical "third way" to add or remove horizontal distance between two elements, provided they are inline-block, since they will be counted as a single "word" in that case, and any whitespace between will collpapse down to the one single controllable "word-spacing" property. Aside from this trick I'm not aware of another way to get this 100% result.

word-spacing 提供了神奇的“第三种方式”来添加或删除两个元素之间的水平距离，前提是它们是内联块，因为在这种情况下它们将被视为单个“单词”，并且它们之间的任何空格都将折叠为单一可控的“字间距”属性。除了这个技巧，我不知道另一种方法来获得这个 100% 结果。

I humbly present the ultimate answer to the fixed-gutters flex-columns problem. I hereby name my solution "the omega maneuver". It comes with the ability to handle arbitrary mixed width columns (adding up to 100% total width exactly or slightly less for rounding), any gutter size, any predefined amount of columns in width, handles arbitrary amounts of rows with auto-wrapping, and uses inline-block elements so therefore provides the vertical-alignment options that come with inline-block, AND it doesn't require any extra markup and only requires a single class declaration on the container (not counting defining column widths). I think the code speaks for itself. Here's the code implementation for 2-6 columns using 10px gutters and bonus helper classes for percentages.

我谦虚地提出了固定排水沟 flex-columns 问题的最终答案。我在此将我的解决方案命名为“欧米茄机动”。它具有处理任意混合宽度列的能力（添加最多 100% 的总宽度以进行四舍五入）、任何装订线大小、任何预定义的宽度列数、使用自动换行处理任意数量的行，以及使用 inline-block 元素，因此提供了 inline-block 附带的垂直对齐选项，并且它不需要任何额外的标记，只需要容器上的单个类声明（不包括定义列宽）。我认为代码不言自明。这是 2-6 列的代码实现，使用 10px 装订线和百分比的奖金助手类。

EDIT: interesting conundrum. I've managed to get two slightly different versions; one for mozilla and ie8+, the other for webkit. It seems the word-spacing trick doesn't work in webkit, and I don't know why the other version works in webkit but not ie8+/mozilla. Combining both gets you coverage over everything and I'm willing to bet there's a way to unify this tactic or something very similar to work around the issue.

编辑：有趣的难题。我设法得到了两个略有不同的版本；一个用于 mozilla 和 ie8+，另一个用于 webkit。似乎单词间距技巧在 webkit 中不起作用，我不知道为什么其他版本在 webkit 中有效，但在 ie8+/mozilla 中无效。将两者结合起来可以让您涵盖所有内容，我愿意打赌有一种方法可以统一这种策略或非常相似的方法来解决这个问题。

EDIT2: Mostly got it! Magical text-align: justifygets WebKit almost there with the word-spacing one. The spacing just seems a tiny bit off, like a matter of pixels on the right and maybe one extra in the gutters. But it's usable and it seems more reliable about keeping the columns than anything I've used before. It never chops down to fewer columns, it'll compress until the browser gets a horizontal scrollbar.

EDIT2：大部分都明白了！Magicaltext-align: justify几乎可以使用单词间距来获得 WebKit。间距似乎有点偏离，就像右边的像素问题，也许是排水沟中的一个额外像素。但它是可用的，而且与我以前使用过的任何东西相比，保留列似乎更可靠。它永远不会减少到更少的列，它会压缩直到浏览器获得水平滚动条。

Edit3: Got it a little close to perfect. Setting the font-size to 0 normalizes most of the remaining issues with spacing that's off. Just gotta fix IE9 now which collapses it if it font is size 0.

Edit3：让它有点接近完美。将 font-size 设置为 0 可以使大多数剩余的间距问题正常化。现在只需要修复 IE9，如果它的字体大小为 0，它就会折叠它。

EDIT4: Got the answer to IE from some other fluid width posts: -ms-text-justify: distribute-all-lines. Tested in IE8-10.

EDIT4：从其他一些流体宽度帖子中得到了 IE 的答案：-ms-text-justify: distribute-all-lines。在 IE8-10 中测试。

/* The Omega Maneuver */
[class*=cols] { text-align: justify; padding-left: 10px; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class*=cols]>* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 20px; }
.cols3 { word-spacing: 30px; padding-right: 30px; }
.cols4 { word-spacing: 40px; padding-right: 40px; }
.cols5 { word-spacing: 50px; padding-right: 50px; }
.cols6 { word-spacing: 60px; padding-right: 60px; }

  .cols2 > * { margin-right: -10px; }
  .cols3 > * { margin-right: -20px; }
  .cols4 > * { margin-right: -30px; }
  .cols5 > * { margin-right: -40px; }
  .cols6 > * { margin-right: -50px; }

Some helpers:

一些帮手：

.?, .?s >* { width: 12.50%; }
.?, .?s >* { width: 16.66%; }
.?, .?s >* { width: 20.00%; }
.?, .?s >* { width: 25.00%; }
.?, .?s >* { width: 33.00%; }
.?, .?s >* { width: 37.50%; }
.?, .?s >* { width: 40.00%; }
.?, .?s >* { width: 50.00%; }
.?, .?s >* { width: 60.00%; }
.?, .?s >* { width: 62.50%; }
.?, .?s >* { width: 66.00%; }
.?, .?s >* { width: 75.00%; }
.?, .?s >* { width: 80.00%; }
.?, .?s >* { width: 83.33%; }
.?, .?s >* { width: 87.50%; }
.blarg-five-twelfs { width: 41.66%; }

You can witness my magnum opus in action amongst a field of glory here: http://jsfiddle.net/xg7nB/15/

你可以在这里见证我的杰作在荣耀的领域中发挥作用：http: //jsfiddle.net/xg7nB/15/

<div class="cols4">
    <div class="?">This is my magnum opus</div>
    <div class="?">I finally beat css</div>
    <div class="?">? ? ? ? ?</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

The absolute minimal implementation, using as an example 4 equal width (25%) width cols and 10px gutters is like so:

绝对最小的实现，例如使用 4 个等宽 (25%) 宽度的列和 10px 的装订线，如下所示：

.fourEqualCols { word-spacing: 40px; padding: 0 40px 0 10px;
                 text-align: justify; font-size: 0;
                 -ms-text-justify: distribute-all-lines; }

.fourEqualCols>* { margin-right: -30px; width: 25%;
                   display: inline-block; word-spacing: normal;
                   text-align: left; font-size: 13px; }


<div class="fourEqualCols ">
  <div>GLORIOUSLY CLEAN MARKUP</div>
  <div>I hate extra markup and excessive class props</div>
  <div>Naked code</div>
  <div>get intimate</div>
</div>

Soooo this code essentially replaces pretty much any existing grid framework right? If you can arbitrarily set gutters and then just make sets of columns that hit 100% width, that's strictly superior to most/all grid frameworks in fact isn't it? If you're not developing for IE7 anymore like a lot of us then that combined with box-sizing: border-box renders padding and border also a non-issue.

Soooo 这段代码基本上取代了几乎所有现有的网格框架，对吗？如果您可以任意设置装订线，然后只制作一组达到 100% 宽度的列，那实际上绝对优于大多数/所有网格框架，不是吗？如果您不再像我们很多人一样为 IE7 开发，那么结合 box-sizing：border-box 渲染填充和边框也不是问题。

Edit: oh right you wanted to be flush with the sides of the container. No problem with this, I had to specifically add side gutters so we can just change some values by 10 and get rid of the padding and voila. http://jsfiddle.net/bTty3/

编辑：哦，对了，您想与容器的侧面齐平。没问题，我必须专门添加侧边沟，这样我们就可以将一些值更改 10 并摆脱填充和瞧。http://jsfiddle.net/bTty3/

[class^=cols] { text-align: justify; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class^=cols] >* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 10px; }
.cols3 { word-spacing: 30px; padding-right: 20px; }
.cols4 { word-spacing: 40px; padding-right: 30px; }
.cols5 { word-spacing: 50px; padding-right: 40px; }
.cols6 { word-spacing: 60px; padding-right: 50px; }
 .cols2 >* { margin-right: 0 }
 .cols2 >* { margin-right: -10px; }
 .cols3 >* { margin-right: -20px; }
 .cols4 >* { margin-right: -30px; }
 .cols5 >* { margin-right: -40px; }
 .cols6 >* { margin-right: -50px; }

Same html

相同的 html

<div class="cols4">
    <div class="?">This is my magnum opus</div>
    <div class="?">I finally beat css</div>
    <div class="?">? ? ? ? ?</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

I beat CSS here's your proof

我打败了 CSS 这是你的证明

回答by NGLN

Try this pure CSS2 solution: demo fiddle

试试这个纯 CSS2 解决方案：demo fiddle

Base CSS(fiddlewithout the cosmetics):

基本 CSS （没有化​​妆品的小提琴）：

html, body {
    padding: 0;
    margin: 0;
}
#wrap {
    padding-right: 30px;
    overflow: hidden;
}
.col {
    float: left;
    margin-left: 40px;
    margin-right: -30px;
}
.col:first-child {
    margin-left: 0;
}
.small {
    width: 16.66%;
}
.medium {
    width: 25%;
}
.large {
    width: 41.66%;
}

HTML:

HTML：

<div id="wrap">
    <div class="col small"></div>
    <div class="col medium"></div>
    <div class="col small"></div>
    <div class="col large"></div>
</div>

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.

在 IE7、IE8、IE9、Opera 11.50、Safari 5.0.5、FF 6.0、Chrome 13.0 的 Win7 上测试。

Update:

更新：

Now, if you like this to work with an arbitrary number of columns, you have to add an extra class to the container specifying the column count:

现在，如果您喜欢这样处理任意数量的列，则必须向容器添加一个额外的类来指定列数：

<div class="cols-12 count-04">
    <div class="col width-02"></div>
    <div class="col width-03"></div>
    <div class="col width-02"></div>
    <div class="col width-05"></div>
</div>

See this updated fiddledemonstrating a number of various column counts.

请参阅此更新的小提琴，展示了许多不同的列数。

Possible bug:

可能的错误：

Theoretically, imho this solution should work for any number of columns for every possible minimum column width in any browser window width. But it seems, all browsers prove not being able to handle: 1. a large number of 1 column width columns, or 2. a small browser window width.

从理论上讲，恕我直言，此解决方案应该适用于任何浏览器窗口宽度中每个可能的最小列宽的任意数量的列。但似乎所有浏览器都无法处理： 1. 大量 1 列宽的列，或 2. 较小的浏览器窗口宽度。

Note that all browsers with a minimum width of 1440 pixels, which equals 12 times 120 pixels (the space occupied by all 10px margins), handle the solution just fine. And when you use 2 or more column width colums, the requirement for the minimum browser width indeed drops to 720 pixels (6 * 120px). This last case sounds more realistic to be, but still, I cannot explain this browser behaviour.

请注意，所有最小宽度为 1440 像素，等于 12 乘以 120 像素（所有 10 像素边距占用的空间）的浏览器都可以很好地处理该解决方案。并且当您使用 2 个或更多列宽列时，对最小浏览器宽度的要求确实下降到 720 像素（6 * 120px）。最后一种情况听起来更现实，但我仍然无法解释这种浏览器行为。

I tried fixing the issue by introducing an additional last columnclass as demonstrated by this fiddle, but it does not solve the problem for small browser widths. It dóes solve a tiny rounding error due to the broken width percentages though, but that issue could be ignored I suppose.

我尝试通过引入一个额外的最后一列类来解决这个问题，如this fiddle 所示，但它不能解决小浏览器宽度的问题。虽然它确实解决了由于断宽百分比而导致的微小舍入误差，但我想这个问题可以忽略不计。

I would like to hear from other css experts on this one, so I added a bounty.

我想听听其他 css 专家对这个问题的看法，所以我增加了一笔赏金。

回答by avall

Why don't you use

你为什么不使用 

.column > .panel {
    padding: 10px 0 10px 10px;
}

.column:first-child > .panel {
    padding-left: 0px;
}

It will make 10px spaces only between boxes and without using last-child.

它只会在盒子之间留出 10px 的空间，而不使用 last-child。

回答by Sparky

Check out thirtydot's answer in this thread for a pure CSS/HTML (Fluid layout with equally spaced "columns" without JavaScript)...

在此线程中查看三十多点对纯 CSS/HTML 的回答（具有等距“列”而没有 JavaScript 的流体布局）...

Fluid width with equally spaced DIVs

具有等距 DIV 的流体宽度

http://jsfiddle.net/thirtydot/EDp8R/

http://jsfiddle.net/thirtydot/EDp8R/

Modification of the JSFiddle demonstrates that the "columns" can be made to be different fixed widths and still have equal and fluid margins.

对 JSFiddle 的修改表明“列”可以设置为不同的固定宽度，并且仍然具有相等且流畅的边距。

http://jsfiddle.net/EDp8R/43/

http://jsfiddle.net/EDp8R/43/

Then finally, another example using percentages while still maintaining equal and fluid margins.

最后，另一个使用百分比的例子，同时仍然保持相等和流动的利润率。

http://jsfiddle.net/EDp8R/45/

http://jsfiddle.net/EDp8R/45/

I realize this may not be an exact solution but it gets you pretty close, I think.

我意识到这可能不是一个确切的解决方案，但它让你非常接近，我认为。

回答by Kevin Driessen

In referrence to the Original Question "Is there any way, using pure CSS, to achieve a fluid width columned layout with fixed width margins?"

参考原始问题“有没有办法使用纯 CSS 来实现具有固定宽度边距的流体宽度列式布局？”

It is remarkable how extremely difficult CSS becomes with these kind of questions. The past week I've been working on a 'base template' to create my own 'holy grail', including border, margin and paddings... It seems CSS fails for these kind of questions. Though the question in mind is quite easy, it becomes (nearly?) impossible to achieve in CSS, especially cross-browser.

值得注意的是，CSS 在这些问题上变得极其困难。过去一周我一直在研究一个“基本模板”来创建我自己的“圣杯”，包括边框、边距和填充......似乎 CSS 无法解决这些问题。虽然心中的问题很简单，但在 CSS 中（尤其是跨浏览器）变得（几乎？）不可能实现。

The funny part is that these questions are easily resolved by using tables. I do not understand why we are being forced by the web-society to use div's instead for such vague arguments like 'semantics' and 'easy overview' as most arguments are weak or even false. People saying tables are giving more trouble, clearly have no understanding of the real difficulty that lies within CSS.

有趣的是，使用表格可以轻松解决这些问题。我不明白为什么我们被网络社会强迫使用 div 来代替像“语义”和“简单概述”这样模糊的论点，因为大多数论点都很弱甚至是错误的。人们说表格带来更多麻烦，显然不了解 CSS 中的真正困难。

Anyway, if you want to have an table-structure (as colums are part of a table) I suggest using 'display:table'.

无论如何，如果你想要一个表结构（因为列是表的一部分），我建议使用'display:table'。

To achieve the image beneath the original question with pure CSS, the following could be used:

要使用纯 CSS 实现原始问题下方的图像，可以使用以下内容：

CSS

CSS

html,body{
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100%;
    overflow: auto;
}
.table{
    background: pink;
    display: table;
    width: 100%;
    height: 100%;
}
.tableRow{
    display: table-row;         
}
.tableCell{
    display: table-cell;
    vertical-align: top;
    height: 100%;  
}
/*
    Ensures the full size of the table-cell has the behaviour of a block-element. 
    This is needed, because 'table-cell' will behave differently in different browsers.
*/
.tableCell>div{
    height: 100%;
}
/*
    Padding has to be used instead of margin in 'border-box' modus.
*/
.tableCell>div>div{
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
/*
    The final content.
*/
.tableCell>div>div>div{
    background: lightblue;
    padding: 5px;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}


#col1{
    width: 16.66%;          
}
#col1>div>div{
    padding-right: 10px;
}
#col2{
    width: 25%;         
}
#col2>div>div{
    padding-right: 10px;
}
#col3{      
    width: 16.66%;
}
#col3>div>div{
    padding-right: 10px;
}
#col4{
    width: 41.66%;
}

HTML

HTML

<div class="table">
    <div class="tableRow">
        <div id='col1' class="tableCell">   
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col2' class="tableCell">
            <div><div><div>25%</div></div></div>
        </div>
        <div id='col3' class="tableCell">
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col4' class="tableCell">
            <div><div><div>41.66%</div></div></div>
        </div>  
    </div>
</div>

I'd say it is quite overdone using additional divs for just a margin, but unfortunately CSS doesn't have a 'margin-box' model, which would actually solve a billion problems.

我会说使用额外的 div 只是为了一个边距是相当过分的，但不幸的是 CSS 没有“边距框”模型，这实际上可以解决十亿个问题。

This amount of nested code might make you think 'why not using other techniques?' as that may result in less code. For a very specific wish that would be the case. However, other techniques often involve floating or absolute positioning. These techniques can not achieve the same thing: floats for example can achieve colums that are equal in length, but when you want a border or margin you'll find yourself in trouble. For absolute positioning it is more like the opposite: you can solve the margin-problem, but the height can only be based on one column.

如此多的嵌套代码可能会让您思考“为什么不使用其他技术？” 因为这可能会导致更少的代码。对于一个非常具体的愿望，情况就是这样。然而，其他技术通常涉及浮动或绝对定位。这些技术无法实现相同的目的：例如，浮动可以实现长度相等的列，但是当您想要边框或边距时，您会发现自己遇到了麻烦。对于绝对定位，它更像是相反的：您可以解决边距问题，但高度只能基于一列。

In my opinion CSS has failed to meet the requirements. While it is ment to replace tables for positiong, after all these years it is still not possible to get the same results. To achieve 'the holy grail of holy grails' table structures are not just the easiest way, there are also the only way... at least, for as far I know after trying hundreds of possibilities.

在我看来，CSS 未能满足要求。虽然可以替换 positiong 的表，但经过这么多年，仍然无法获得相同的结果。实现“圣杯中的圣杯”表结构不仅是最简单的方法，也是唯一的方法……至少，在我尝试了数百种可能性之后，据我所知。

The remaining question is: why using divs if you're using them as tables? This I do not fully understand myself, but people seem to have their reasons for that.

剩下的问题是：如果将它们用作表格，为什么还要使用 div？这我自己并不完全理解，但人们似乎有他们的理由。

回答by Benjamin Udink ten Cate

I use the grid of OOCSS for this

我为此使用了 OOCSS 的网格

https://github.com/stubbornella/oocss

https://github.com/stubbornella/oocss

I recently put a demo online on my own site since there are no proper examples online :(

我最近在我自己的网站上放了一个在线演示，因为网上没有合适的例子:(

http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html

http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html

回答by BBQ Brains

An easier way to get the same effect is to let the content inside your columns create your gutters rather than applying margins/padding to the columns themselves. This can be done with fixed, fluid, elastic, etc. grids.

获得相同效果的更简单方法是让列内的内容创建装订线，而不是对列本身应用边距/填充。这可以通过固定、流体、弹性等网格来完成。

For example:

例如：

/* Gutters */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote,
hr, address, pre, object, fieldset
{
    margin-right: .75rem;
    margin-left: .75rem;
    padding-right: .75rem;
    padding-left: .75rem;
}

This also simplifies sizing your columns, nesting, and applying backgrounds to your lego pieces.

这也简化了调整列大小、嵌套和将背景应用到乐高积木的过程。

回答by Jonas Grumann

Why not using the padding like in your first example and then set box-sizing: border-box on all elements?

为什么不使用第一个示例中的填充，然后在所有元素上设置 box-sizing: border-box 呢？

回答by Andrew Tait

I have recently developed an alternative solution for this which allows for any combination of flexible columns within a row with a fixed and consistent margin across all columns, regardless of the parent element's width.

我最近为此开发了一个替代解决方案，它允许在一行中任意组合灵活的列，所有列的边距固定且一致，而不管父元素的宽度如何。

This doesn't use any JavaScript and works in IE8+.

这不使用任何 JavaScript 并且适用于 IE8+。

In this solution the margin is defined on two classes - so it is easy to change it for responsive designs. The column widths are also representative of the space they use, for example a 2 column row has widths of 50% and a 4 column row has widths of 25%.

在这个解决方案中，边距是在两个类上定义的 - 因此很容易为响应式设计更改它。列宽也代表他们使用的空间，例如 2 列行的宽度为 50%，而 4 列的行宽度为 25%。

You can see an example at http://www.andrewjamestait.co.uk/conflexgrids/

您可以在http://www.andrewjamestait.co.uk/conflexgrids/ 上看到一个示例

Or it is available on GitHub at https://github.com/andrewjtait/conflexgrids

或者它可以在 GitHub 上获得，网址为https://github.com/andrewjtait/conflexgrids

回答by mxg

If you can live with another nested div per column you could define the desired margin for each. To get rid of the margin on the left and right outer edges you can define a negative margin on the outer container.

如果您可以在每列中使用另一个嵌套 div，则可以为每个列定义所需的边距。要去除左右外边缘的边距，您可以在外部容器上定义负边距。

E.g.: Using pureCSSpure-g is the outer container, pure-u-* is a column node (display: inline-block) containing the nested div. spacing is the name of this custom extension of the pureCSS grid system to allow column margins.

例如：使用pureCSSpure-g 是外部容器，pure-u-* 是包含嵌套 div 的列节点（显示：inline-block）。间距是这个 pureCSS 网格系统的自定义扩展的名称，以允许列边距。

.pure-g.spacing {
    margin: 0 -10px;
}

.pure-g.spacing [class *= "pure-u"] > div {
    margin: 10px;
}

Should work on most browsers. Tell me if it doesn't - I am using it already.

应该适用于大多数浏览器。如果没有，请告诉我 - 我已经在使用它了。

regards, Max

问候，马克斯

相关推荐

Html 如何在表格中添加水平线？

Html 如何在表格中添加水平线？

Html 悬停在标签上时，鼠标指针变为手形

Html 悬停在标签上时，鼠标指针变为手形

Html 覆盖 <div> 内联宽度样式以使元素拉伸到内​​容？

Html 覆盖 <div> 内联宽度样式以使元素拉伸到内​​容？

将换行符转换为 html 的 sql 查询 <br>

将换行符转换为 html 的 sql 查询 <br>

相关推荐
最近更新
标签