那些遇到过的问题

在元素的居中网格中左对齐的最后一行

Iva*_*rst 47 css text-align css3 grid-layout

我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |
Run Code Online (Sandbox Code Playgroud)

这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: 

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |
Run Code Online (Sandbox Code Playgroud)

目前发生的是:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |
Run Code Online (Sandbox Code Playgroud)

我不能像一个建议那样添加额外的填充div,因为可能有任意数量的块,行和列的数量将根据浏览器宽度而变化.出于同样的原因,我也不能直接设置块#7.无论有多少列,块必须始终保持居中.

这是一支更好地展示的笔:

http://codepen.io/anon/pen/IDsxn

这可能吗？我觉得应该是.我宁愿不使用flexbox,因为它只是ie10 +,我想ie9 +.我真的很喜欢纯CSS解决方案,但如果你告诉我JS是唯一的方法,我很乐意看到它在行动.

供参考 - 类似的问题,但没有一个被彻底解释:

如何在多行flexbox中对齐左末行/行

CSS - 左对齐居中div中的最后一行图像

固定流体容器网格中最后一行元素的居中,使其在容器保持居中时保持对齐

使用CSS居中多个内联块并将最后一行对齐到左侧

web*_*iki 16

显示内联块的解决方案

这种自适应网格更简单:标记更少,CSS更少,因此更容易在生产站点中实现并适应您的确切需求.

= >> DEMO << =(调整结果窗口大小以查看效果)

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>
Run Code Online (Sandbox Code Playgroud)

它涉及 :

  1. 4个媒体查询 200px宽的块和一个可扩展到1000px的容器.根据网格元素的宽度和容器的总宽度,您可能需要更少或更多

  2. 删除内联块元素之间的空格(在下面的演示中,我使用了字体大小的技术,但你可以使用其他的(请参阅如何删除内联块元素之间的空格？对于其他技术)

  3. 块之间的固定边距

一行中的块数适应容器的大小.该text-align属性保持默认值,left以便最后的项目与左侧对齐.

浮动在块和容器之间具有自适应边距

= >> DEMO << =(您需要在750px下调整结果窗口的大小才能看到它的运行情况)

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>
Run Code Online (Sandbox Code Playgroud)

该技术涉及:

  1. 彩车
  2. position:absolute;
  3. :nt-child() css选择器
  4. 媒体查询

它将块放在容器中心,并在容器的所有块+侧面的顶部/左侧/紧/底部给出相同的边距.由于此解决方案使用浮动,因此最后一行与左侧对齐.

一行中的块数适应窗口的宽度.

mah*_*ega 12

这里有一个非常简单的JavaScript(以及CSS中的一些小变化)解决方案:

http://jsfiddle.net/ha68t/

它对我来说很好.

CSS:

.container {
  margin: 0 auto;
  max-width:960px;
  background-color: gold;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: block;
  float: left;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

$(document).ready(function(){
    setContainerWidth();
});

$(window).resize(function(){
   setContainerWidth();
});

function setContainerWidth()
{
    $('.container').css('width', 'auto'); //reset
    var windowWidth = $(document).width();
    var blockWidth = $('.block').outerWidth(true);
    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
    $('.container').width(maxBoxPerRow * blockWidth);
}
Run Code Online (Sandbox Code Playgroud)

jQuery是必需的:)

  • 在你提出的问题中"你真的想要一个纯粹的CSS解决方案",但将这个答案标记为已被接受.不知道发生了什么事,是否相反？如果是,这是否意味着它不是？但如果不是,它是否意味着即使它不是？我是谁？现在是几奌？沃尔多在哪里？什么是非常明亮的光？妈妈？........ (2认同)

Dan*_*eld 10

它的价值:现在是2017年,网格布局模块开箱即用

* {
    margin:0;
    padding:0;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
}
.block {
  background-color: #ddd;
  border: 1px solid #999;
  height: 100px;
  width: 100px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
</div>
Run Code Online (Sandbox Code Playgroud)

(Codepen演示).

如果浏览器支持适合您 - 那么使用网格.如果没有,那么请继续阅读....

正如在@Web-tiki的回答中所提到的,使用CSS可以做的最好的事情是使用一系列媒体查询.

话虽这么说,如果你使用的是LESS之类的预处理器 - 这不是一个如此困难或容易出错的任务.(虽然,是的,CSS仍然很长很难看)

更新的CODEPEN(调整窗口大小以查看结果)

以下是如何利用LESS设置媒体查询:

首先根据您需要的设计设置一些较少的变量:

@item-width:100px;
@item-height:100px;
@marginV: 4px;
@marginH: 2px;
@min-cols:2;
@max-cols:9; //set an upper limit of how may columns you want to write the media queries for
Run Code Online (Sandbox Code Playgroud)

然后:

设置这样的迭代混合:(您可以将此代码粘贴到http://less2css.org)

.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        .container{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width + 2*@marginH);
}

.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);
Run Code Online (Sandbox Code Playgroud)

以上mixin将以下列形式吐出一系列媒体查询:

@media (min-width: 208px) {
  .container {
    width: 208px;
  }
}
@media (min-width: 312px) {
  .container {
    width: 312px;
  }
}
@media (min-width: 416px) {
  .container {
    width: 416px;
  }
}
@media (min-width: 520px) {
  .container {
    width: 520px;
  }
}
@media (min-width: 624px) {
  .container {
    width: 624px;
  }
}
@media (min-width: 728px) {
  .container {
    width: 728px;
  }
}
@media (min-width: 832px) {
  .container {
    width: 832px;
  }
}
Run Code Online (Sandbox Code Playgroud)

剩下的CSS(LESS):

.container {
  margin: 0 auto;
  text-align: center;
  overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
}
.block {
  background-color: #ddd;
  border:1px solid #999;
  box-sizing:border-box;
  float: left;
  height: @item-height;
  width: @item-width;
  margin:@marginV @marginH;
}
Run Code Online (Sandbox Code Playgroud)

......你得到了理想的结果.

...而且定制布局非常容易:

我需要做的就是根据我的需要更改我在LESS mixin中使用的变量 - 我得到了我所追求的确切布局.

归档时间：

查看次数：

17316 次

最近记录：

8 年 前
如何删除内联块元素之间的空格？ 1014
响应方块网格 163
如何在多行flexbox中对齐左末行/行 70
使用CSS居中多个内联块并将最后一行对齐到左侧 9
更多相关链接
相关归档
为什么我的html表'max-width'不会导致文本换行？ 43
在Safari中禁用弹性滚动 42
CSS优先级 25
开源/免费HTML5/CSS3/JavaScript IDE？ 25
纯净的CSS星形 19
CSS中的剪辑路径插入不适用于chrome 16
如果应用过滤器,SVG将消失 11
Internet Explorer 9中的Box Shadow Ghosting 5
列中的Bootstrap写作(如报纸) 4
是否可以用@ font-face替换favicon？ 2
难疑归档
使用Git将最近的提交移动到新分支 4647
如何更新GitHub分叉存储库？ 3390
如何在Node.js中退出 1762
Make .gitignore会忽略除少数文件之外的所有内容 1531
类型检查:typeof,GetType还是？ 1435
在对象名称之前单个和双下划线的含义是什么？ 1205
我怎样才能用Python代表'Enum'？ 1146
如何使用git merge --squash？ 1101
NP,NP-Complete和NP-Hard有什么区别？ 1064
将标签重新定义为4个空格 1041