均匀间隔的固定宽度的列 - 在响应式设置中 [英] Evenly spaced fixed-width columns - in a responsive setting

问题描述

我试图创建一些均匀间隔的列（ ol ），列本身的宽度是固定的。

$ b $到目前为止，我已经通过使用 table 布局并在列表项中嵌套了一个附加元素，从而达到了预期效果。

HTML：

 < ol> 
< li>< div>< / div>< / li> 
< li>< div>< / div>< / li> 
< li>< div>< / div>< / li> 
< li>< div>< / div>< / li> 
< li>< div>< / div>< / li> 
 
 
  

CSS：

ol {
display：table;
宽度：100％;
}

li {
display：table-cell;
}

div {
margin：0 auto;
width：100px;
height：250px;
}


1. 正如你可以很好用，但有以下两个缺点： http://jsfiddle.net/gDws8/ =nofollow>参见演示，第一个&最后一列不与母体的外边缘齐平。
   
2. 这不能真正用于响应。你可以在较小的宽度上做的唯一事情是堆叠它们，但我想分割它们（每行2或3）。

---

单独的CSS？我知道有很多方法可以在JS中实现这一点，但是我只能使用纯CSS的解决方案。

---

PS 我不关心IE7-，但我确实需要支持IE8。 CSS3选择器是好的，因为我无论如何都使用 selectivizr 在项目中（我知道那是JS; - ））。 https://stackoverflow.com/q/49536/1081234\">how to * really * justify a horizo​​ntal menu。基本上，您所描述的行为是具有相同宽度的内嵌块元素，具有 text-align：justify 应用：

  ol {
 / *强制所需行为* / 
 text-align：justify; 
 / *删除由空白* / 
 font-size：0引起的列之间的最小差距; 
} 
 
 li {
 / * make text-align property applicable * / 
 display：inline; 
 
 
 / *强制证明对齐，要求文本至少超过2行* / 
 ol：在{
 content：; 
 display：inline-block; 
职位：亲属; 
宽度：100％; 
 height：0; 
} 
 
 div {
 display：inline-block; 
 width：100px; 
 height：250px; 
} 
  

工作小提琴。

注意：可能需要重新申请 font-size 和 text-align 添加到 ol 的后代取决于你使用的重置（即防止这些属性被继承）

I'm trying to create some evenly spaced columns (an ol), with the columns themselves being fixed width.

So far, I've managed to achieve the desired effect by using table layout, and nesting an additional element inside the list item.

HTML:

<ol>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ol>​

CSS:

ol {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
}

div {
    margin: 0 auto;
    width: 100px;
    height: 250px;
}

This works great, but has the following 2 shortcomings:

1. As you can see in the demo, the first & last columns don't line up flush with the parent's outer edges.
2. This can't really be used responsively. The only thing you can do at smaller widths is stack them, but I'd like to split them (2 or 3 per row).

---

Is what I'm after even possible in CSS alone? I know there are a plethora of ways to accomplish this in JS, but I'm after a CSS-only solution.

---

P.S. I don't care about IE7-, but I do need to support IE8. CSS3 selectors are OK though, since I'm anyhow using selectivizr in the project (I know that's JS ;-)).

解决方案

It seems appropriate for you to recycle "how to *really* justify a horizontal menu". Basically the behaviour you're describing is that of inline-block elements of identical width having text-align:justify applied:

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

Working fiddle.

NB: you may have to re-apply desired font-size and text-align to descendants of ol depending on the reset you're using (i.e. to prevent these properties from being inherited)

这篇关于均匀间隔的固定宽度的列 - 在响应式设置中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！