居中网格 - 内部网格对齐左 - 没有Javascript - 没有媒体查询 [英] Centered Grid - Inner Grid align left - NO Javascript - NO Medias Queries

问题描述

我正在寻找没有javascript的解决方案，并且没有媒体查询（用户可以更改容器大小）。
$ b

[/编辑]

我需要创建一个项目网格。

1. 容器的宽度是灵活的。


2. 网格始终居中


3. 网格中的项目需要左对齐

非常简单，但我找不到解决方案！ ！

以下图片展示了我需要的内容：

这里是一个jsfiddle： http://jsfiddle.net/5e4bcc9L/1/

HTML：

 < div class =container> 
< div class =grid> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< a href =＃>< / a> 
< / div> 
< / div> 
  

CSS：

  .container {
 width：100％; 
背景颜色：#CCC; 
 text-align：center; 
} 
 .grid {
 background-color：＃999; 
 display：inline-block; 
 text-align：left; 
} 
 a {
 display：inline-block; 
 height：100px; 
 width：100px; 
背景颜色：＃000; 
 margin：5px; 
} 
  

解决方案

想要使用JavaScript或媒体查询，这很难实现您想要的方式。问题在于你在网格中设置了块的精确高度和宽度。我会解释更多：

居中网格左对齐

CSS（保持HTML相同）

  .container {
 width：100％; 
身高：100％; 
背景颜色：#CCC; 
 text-align：center; 
} 
 
 .grid {
 background-color：＃999; 
 display：inline-block; 
职位：亲属; 
宽度：80％; 
 border：1px纯黑色; 
} 
 
 .grid a {
 display：inline-block; 
 height：100px; 
 width：100px; 
背景颜色：＃000; 
 margin：5px; 
 float：left; 
} 
 
 .ghost {clear：both;} 
  

如果你看小提琴，它会按照你描述的方式工作......直到你调整窗口大小。这是因为网格中的块不能浮动，直到有足够的空间让它们这样做，这会给你一个不正确（对你）大小的块。

如果左对齐标准可以被删除，那么就中心内容而言，您会得到更愉快的体验，就像 在这里展示 。只需在上面的CSS中注释掉float就可以了解我的意思。

否则，链接 web-tiki 可能是最好的选择。

[EDIT]

I'm looking for a solution without javascript, and without medias queries (user can change the container size).

[/EDIT]

I need to create a grid of items.

1. The container has a flexible width.
2. The grid is always centered
3. Items inside the grid need to be left aligned

Pretty simple, but I can't find the solution !!

Here is an image that present what I need:

And here is a jsfiddle : http://jsfiddle.net/5e4bcc9L/1/

HTML :

<div class="container">
    <div class="grid"> 
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
    </div>
</div>

CSS :

.container {
    width: 100%;
    background-color:#CCC;
    text-align: center;
}
.grid {
    background-color:#999;
    display: inline-block;
    text-align: left;
}
a {
    display:inline-block;
    height: 100px;
    width: 100px;
    background-color:#000;
    margin: 5px;
}

解决方案

Given that you don't want to use JavaScript or media queries, this is tough to achieve exactly the way you want. The problem lies in the fact that you're setting exact heights and widths of your blocks within the grid. I'll explain more:

Centered grid with left alignment

CSS (keeping HTML the same)

.container{
    width: 100%; 
    height:100%;
    background-color:#CCC;
    text-align:center;
}

.grid{
    background-color:#999; 
    display: inline-block;
    position:relative;
    width: 80%;
    border:1px solid black;
}

.grid a{
    display:inline-block; 
    height: 100px; 
    width: 100px; 
    background-color:#000;
    margin: 5px;
    float:left;
}

.ghost{clear: both;}

If you look at the fiddle, it works the way you described...until you resize the window. That's because the blocks in the grid can't float until there's enough space for them to do so, which leaves you with an "incorrectly" (to you) sized block.

If the left alignment standard can be dropped, you get a much more pleasant experience as far as centered content is concerned as demonstrated here. Simply comment out the float in the CSS above to see what I mean.

Otherwise, the link web-tiki gave above is probably the best option.

这篇关于居中网格 - 内部网格对齐左 - 没有Javascript - 没有媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！